必须使用原生交互标签（button/a/input）承载点击行为，禁用div模拟和role="button"；控制dom嵌套≤6层；确保触控目标≥44×44px且无pointer-events:none等阻断样式；用requestanimationframe优化样式变更，保障:active反馈在5ms内生效。
按钮点击响应慢，不是 JS 绑定得不够快，而是 HTML 结构和事件路径本身就在拖后腿——真机实测，用 <div> 模拟按钮比原生 <code><button></button> 平均多出 30–50ms 延迟，尤其在 iOS Safari 中，:active 样式甚至不触发。
必须用 <button></button>、<a></a> 或 <input> 承载点击行为
原生交互标签自带焦点管理、键盘支持、:active 渲染通道和最小触控热区保障；换成 <div class="btn"> 后，浏览器不认为它是可交互元素，<code>touchstart 得靠 JS 手动绑定，且 Safari 会跳过伪类样式。
- 禁用
role="button"：它不自动获得焦点、不响应 Enter/Space，在部分安卓 WebView 中完全失效 - 若需样式隔离，用
button { all: unset; }重置后再写样式，别用div+ JS 模拟 -
<label></label>包裹<input type="checkbox">是最稳的热区放大方案——整个label盒模型（含 padding、伪元素）都是可点区域，且不依赖id、不走冒泡
控制 DOM 嵌套深度 ≤6 层
事件冒泡路径变长，中间任意一层设了 pointer-events: none 或 touch-action: none 都可能截断或延迟事件。Chrome DevTools 的 “Show DOM properties” 可查 depth 值，超过 6 就该重构。
- 砍掉无意义包裹层：比如只为加 class 套的
<div>，改用 CSS <code>display: contents（Safari 15.4+ 支持）抹除渲染但保留语义流 - 导航结构控制在
nav > ul > li > a这类 4 层以内，避免nav > div > section > article > div > a这种 6+ 层嵌套 - 动态插入菜单项时，用
DocumentFragment批量append，别循环appendChild——每次调用都可能触发 layout -
input必须是label的**直接子节点**，不能有换行或空格：<label>同意<input type="checkbox"></label>，而非带换行的写法 - 若用 flex 布局，加
align-items: center，防止input被拉伸错位 - 慎用
touch-action: none：它会禁用所有原生手势，包括点击，除非你明确接管了所有 touch 处理逻辑 - 用
requestAnimationFrame包裹样式变更，让浏览器把更新合并到下一帧 - 优先用
classList.toggle()切换预定义 CSS 类，而非直接写element.style.transform - 若需动画，仅对真正频繁动画的按钮（如轮播控制钮）在动画开始前 1 帧设置
will-change: transform，结束后立即移除
确保触控目标 ≥44×44px，且禁用阻断事件的样式
iOS 和 Android 都要求最小触控目标为 44×44px，低于此值系统会自动放大热区，但不可靠；更关键的是，pointer-events: none、opacity: 0、visibility: hidden 在 label 或其父级上会直接切断事件链。
避免在 DOMContentLoaded 中批量操作按钮样式
页面就绪后立刻遍历所有 .btn 并设置 style.transform，看似合理，实则极易触发同步布局抖动——浏览器必须回溯计算样式、布局、绘制，尤其当按钮数超 20 时，主线程卡顿明显。
最容易被忽略的，是「交互反馈时机」本身——比如按钮点击后 300ms 才切换 loading 状态，用户感知就是卡顿；而原生 button 的 :active 样式在 touchstart 后 5ms 内就能生效，这才是真正的“即时”。
