dom节点过多、语义缺失、触摸目标过小、script位置不当及内联资源阻塞是导致事件响应延迟的五大主因，需分别通过扁平化结构、语义化标签、达标尺寸、defer/async优化及外置资源解决。
DOM节点过多直接拖慢事件响应链
浏览器处理 click、touchstart 时，事件要从目标元素逐层冒泡到监听器，每多一层 DOM 节点，就多一次捕获/冒泡路径计算和 event.target 判定。大型应用常因组件嵌套过深、列表未虚拟化、动态插入未批量导致 DOM 节点超 2000 个——实测在中低端安卓机上，touchstart 到 handler 执行延迟从 12ms 拉升至 68ms。
- 用 Chrome DevTools → Elements 面板右键任意节点 →
Show DOM properties查depth和childElementCount，深度 >6 或子节点 >50 的容器需优先审查 - 避免用
div封装每个列表项；改用<template></template>+DocumentFragment批量插入，而非循环appendChild - React/Vue 项目中，检查是否误将
v-for/map渲染结果直接塞进深层嵌套的div容器，应把列表提升到更浅层级
语义化缺失让触控反馈“失联”
不是所有可点击区域都能被系统正确识别为交互目标。<div onclick="..."> 在 iOS VoiceOver 或 Android TalkBack 下大概率被跳过，手指点下去无 <code>:active 样式、不触发键盘回车、甚至被 WebView 忽略——这不是 JS 绑定问题，是 HTML 层级语义断裂。
- 必须用
<button></button>替代所有带点击行为的div，哪怕只调toggle()；role="button"是兼容性陷阱，不支持 focus 管理、不响应 Space 键 -
<label></label>必须显式包裹<input type="checkbox">或用for关联 ID，否则点击文字区域无法触发状态变更 - 触摸目标尺寸不足 48×48px 时，即使 DOM 正确，iOS 仍会自动放大点击区域并引入 300ms 延迟；用
min-width: 48px+min-height: 48px强制达标
script 位置与属性错配加剧主线程阻塞
大型应用 JS 体积大，但真正卡住交互的往往不是执行慢，而是下载和解析时机不对。<script></script> 放在
