删比调css更影响触控响应，因touchstart需逐层冒泡，dom嵌套超6层致延迟升至42ms；语义缺失、首屏html超15kb、触摸目标不足48×48px及相邻元素间距过小，共同导致移动端高延迟。

为什么删

比调CSS更影响触控响应

移动端触控延迟高，八成不是JS慢，而是DOM太深——touchstart事件要从最内层元素逐层冒泡，每多一层嵌套就多一次事件捕获开销。实测6层嵌套的平均响应延迟42ms，而

结构稳定在8–12ms。

• 用Chrome DevTools右键任意元素 → Show DOM properties 查看depth值，超6就该重构
• 禁用为加class或JS选择器硬套的
  ；改用display: contents（Safari 15.4+支持）抹除无意义包裹
• CMS生成的冗余wrapper（如
  ）必须手动清理，压缩工具扫不掉这类语义垃圾

  语义化标签不是为了SEO，是让VoiceOver“摸到”按钮

  把<div class="btn" onclick="submit()"></div>换成<button></button>，不只是写法变化：原生button自带键盘焦点、:active反馈、屏幕阅读器可识别路径；div伪装的按钮在iOS VoiceOver下直接被跳过，用户双指滑动时“点不着”。

  • <label></label>必须显式包裹<input type="checkbox">，或用for属性关联，否则点击文字区域无法触发切换
  • 禁用role="button"：它不自动获得keyboard focus，不响应Space/Enter，部分WebView中完全失效
  • 表格类结构必须用<table>+<code><th scope="col">，别用div模拟——TalkBack在竖屏下会读错行列关系<h3>首屏HTML体积超15KB（gzip后）就会白屏突破1秒</h3> <p>不是“压缩率不够”，而是HTML里塞了不该出现的东西：CMS注入的空</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a> <p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <div>、内联非关键JS、<code>@import引入的CSS、未删的开发注释。这些字节在3G网络下直接拖慢首字节到达时间。
    • 移除所有无功能的空<div>和注释，尤其<code><!-- generated by XXX -->这类CMS签名
    • <script></script>必须带async或defer；统计脚本、埋点代码禁止内联
    • CSS禁止放在底部；首屏样式必须内联进，其余用<link rel="preload" as="style" href="non-critical.css" onload="this.rel='stylesheet'">
    • 绝对禁用@import——它让CSS加载串行化，在3G下可能多拖800ms

    触摸目标≠视觉大小，clientWidth×clientHeight必须≥48×48

    只给按钮加padding: 12px不够，得用Chrome DevTools的设备模式实时测渲染后的clientWidth和clientHeight。很多图标按钮<button><svg></svg></button>实际尺寸只有24×24，VoiceOver焦点环直接跳过。

    • 所有<a></a>、<button></button>、<input type="checkbox">必须显式设min-width: 48px; min-height: 48px;
    • 相邻可触元素间距至少8px，否则iOS VoiceOver“滑动切换焦点”时容易连跳两个
    • 避免用font-size: 12px+padding: 2px 6px拼小按钮——计算后很可能不到48px

    真正卡住移动端体验的，从来不是某一行CSS写得不够巧，而是HTML骨架本身没按触控逻辑长出来。DOM深度、语义缺失、首屏体积、触摸区域这四件事，改完就能测出真实延迟变化——别等优化完JS再回头查，它们就在标签里等着你删。