HTML性能优化技巧汇总

你的网页Lighthouse评分卡卡在80分上不去？问题很可能出在HTML层——DOM节点过多、内联脚本阻塞渲染、残留的document.write、服务端模板产生的冗余空格与注释，都在悄悄拖垮性能；掌握针对性的HTML优化技巧，精准控制DOM规模与结构，是突破性能瓶颈、轻松迈过90分大关的关键一步。

为什么 Lighthouse 评分卡在 80 分上不去

多数人卡在 80–90 分之间，不是因为没压缩图片或没写 alt，而是 HTML 本身成了性能瓶颈：DOM 节点过多、阻塞渲染的内联脚本位置不对、document.write 残留、或服务端模板拼接出大量冗余空格与注释。Lighthouse 的「减少主线程工作」和「避免长任务」这两项，常被误认为是 JS 问题，实际源头可能就在 HTML 结构里。

• 用 document.querySelectorAll('*').length 查 DOM 节点数，超过 1500 个就该警惕（移动端尤其敏感）
• 检查 里有没有