原生语义化标签（如<button>）和≤6层DOM结构是WebView硬件加速下触控响应不丢帧的硬性前提；因仅原生可交互元素能绑定底层输入通道，而深层DOM会延长touchstart冒泡路径并增加坐标转换开销。
原生语义化标签（如 <button>、<input type="checkbox">）和浅层 DOM 结构（≤6 层）不是“更规范”的写法，而是 WebView 硬件加速下触控响应不丢帧、不跳过、不延迟的硬性前提。
为什么 <button> 比 <div class="btn"> 更快触发 touchstart
WKWebView 和 Android WebView 在硬件加速模式下，会为可交互元素自动创建合成层并绑定底层输入通道。但这个通道只对原生可聚焦、可激活的标签开放：<button>、<input>、<select> 等自带 focus/keyboard/touch 三通路径；而 <div> 即使加了 onclick 或 role="button"，也仅走 JS 事件冒泡，绕过了底层合成层的快速输入分发队列。
常见错误现象：真机上 VoiceOver/TalkBack 点击无反馈，或手指刚落下就触发了 JS，但动画延迟明显——说明事件已进 JS 栈，但合成层没同步更新状态。
- 必须用
<button>替代所有带点击行为的<div>，哪怕只是调用toggleMenu() -
role="button"不要再用了：它不支持:active伪类、不进焦点环、在部分 X5 内核中完全不响应 touchstart -
<label>必须显式包裹<input type="checkbox">，否则点击文字区域无法触发 toggle（iOS WKWebView 尤其严格）
DOM 深度超 6 层直接拖慢 touchstart 响应
硬件加速开启后，touchstart 事件需从最内层元素逐层向上冒泡，每经过一层，就多一次合成层坐标系转换。当 DOM 深度 ≥7，冒泡链变长，且中间任意一层含 transform、opacity < 1 或 will-change，都可能中断或重定向事件路径。
立即学习“前端免费学习笔记（深入）”；
实测数据：在低端安卓设备上，body > div > div > div > div > div > button（7 层）结构，touchstart 到 handler 执行平均延迟 68ms；同功能三层结构（<main><nav><button></button></nav></main>）稳定在 9–13ms。
- 用 Chrome DevTools → Elements 面板右键任意元素 →
Show DOM properties查看depth值，超过 6 就该重构 - 避免为加 class 或 JS 选择器套无意义
<div>：改用display: contents（Safari 15.4+ 支持）抹除包裹层 - 动态插入菜单项时，用
DocumentFragment批量append，别循环appendChild——每次调用都可能触发 layout 回流，干扰合成层调度
viewport + 语义化标签共同决定是否触发硬件加速的触控优化路径
仅写 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 不够。缺少 user-scalable=no 或 initial-scale，WebView 会启用 300ms 延迟双击缩放检测逻辑，这会阻塞 touchstart 的快速通路；而语义缺失则让这个通路压根建不起来。
常见错误现象：页面在 Chrome 模拟器里点按丝滑，但真机上首次点击总卡顿一下——大概率是 viewport 缺失 initial-scale，或按钮用了 <div> 导致合成层未绑定。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">是底线配置（注意：禁用缩放需评估可访问性） - 触摸目标尺寸必须用
min-width/min-height强制 ≥48×48px，CSS 像素 ≠ 物理可触区域 - 不要依赖
padding或line-height“撑开”可触面积——某些 WebView（如微信 X5）会忽略这些计算，只认盒模型尺寸
真正卡顿的从来不是 JS 执行，而是合成层没建好、事件没进对的队列、坐标系在冒泡中途被截断。这些细节在模拟器里全无表现，只有真机 + 原生 WebView 下才暴露得彻底。
