DOM深度超6层会显著拖慢touchstart响应，低端安卓机上平均延迟42ms；三层结构稳定在8–12ms，应通过display: contents等手段重构过深嵌套，并确保语义正确、触摸目标≥48×48px、滚动避免强制同步布局。
DOM深度超6层直接拖慢touchstart响应
低端安卓机上，body > div > div > div > div > div > button这种结构会让touchstart到事件处理器执行平均延迟42ms；而<main><nav><button></button></nav></main>三层结构稳定在8–12ms。浏览器解析是流式过程，每多一层嵌套，事件冒泡路径就多一跳，中间若遇到pointer-events: none或touch-action: none的节点，可能中断或延迟。
- 用 Chrome DevTools → Elements 面板右键任意节点 →
Show DOM properties查看depth值，超过 6 就该重构 - 别为加 class 或 JS 选择器硬套
<div>：改用 CSS <code>display: contents（Safari 15.4+ 支持）抹除无意义包裹层 <td> 里禁止再套 <code><div>：表格单元格内样式计算成本高，嵌套后极易触发重排，尤其在 flex 容器里混用时 <h3>语义缺失导致触控通道失效</h3> <p>把 <code><div class="btn"></div>当按钮用，iOS VoiceOver 会跳过它，Android TalkBack 可能读作“静态文本”，手指点下去毫无反馈——DOM 存在，但语义链断了。原生标签如<button></button>、<input type="checkbox">自带焦点管理、键盘触发（Enter/Space）和触控反馈通道。- 必须用
<button></button>替代所有带点击行为的<div>，哪怕只是执行 <code>onclick="toggleMenu()" -
<label></label>必须显式包裹<input type="checkbox">或使用for关联，否则点击 label 文字区域无法触发 checkbox 切换 - 禁用
role="button"伪装：它不自动支持 keyboard focus、不触发:active、在部分 WebView 中完全无效 - 检查所有
<a></a>、<button></button>、<input type="checkbox">的实际渲染尺寸，用 Chrome DevTools 的「Toggle device toolbar」+「Inspect」实时测 - 图标按钮如
<button><svg></svg></button>必须显式设min-width: 48px; min-height: 48px;，不能只靠 SVG 自身尺寸 - 相邻可触元素间距至少 8px，否则 iOS VoiceOver 在「滑动切换焦点」时容易连跳两个
- 移除 CMS 生成的冗余 wrapper、空
<div> 和注释——它们不占视觉空间，但增加解析负担和 DOM 节点数 <h3>滚动卡顿不是JS慢，是强制同步布局在每帧发生</h3> <p>监听 <code>scroll时调用getBoundingClientRect()或直接改element.style.top，会触发强制同步布局（forced synchronous layout），在每帧都发生，极易掉帧。这不是代码写得不够“节流”，而是读写模式本身就在阻塞渲染流水线。立即学习“前端免费学习笔记（深入）”；
- 用
transform: translateY()替代top/margin-top——它走合成层，不触发重排 - 读取布局信息尽量节流，或移到
requestIdleCallback中执行 -
window.addEventListener('scroll', handleScroll, { passive: true })是底线配置，不加会在 Chrome 控制台报 “Unable to preventDefault inside passive event listener” - 对滚动中要动画的元素加
transform: translateZ(0)或滚动开始前设will-change: transform，滚动结束 100ms 后移除
<div> 堆叠、补全 <code><button></button>标签、压住首屏 HTML 体积，比调一堆 CSS 动画参数更接近根因。 - 用
首屏HTML体积与触摸目标尺寸双重踩坑
首屏 HTML gzip 后超 15KB，白屏时间易突破 1s；而可触元素渲染尺寸（
clientWidth × clientHeight）低于 48×48 CSS 像素，VoiceOver 焦点环会跳过、手指误触率飙升——这两者常被当成“样式问题”忽略，实则是结构级缺陷。- 必须用
