HTML性能优化关键在于避免阻塞解析与渲染：script应放</body>前或用defer/async；preload/preconnect需谨慎使用；精简DOM结构、正确设置charset位置、避免冗余meta和内联大JS。
HTML 本身不直接执行逻辑，但它是页面加载和渲染的起点——写法不当会拖慢解析、阻塞渲染、增加网络开销，甚至让后续 JS/CSS 失效。性能问题往往不是出在 document.querySelector 上，而是出在你写的第一个 <script> 标签里。
怎么避免 <script> 阻塞 HTML 解析
浏览器遇到 <script> 默认会暂停 HTML 解析，下载并执行脚本后才继续。首屏内容卡住，就因为这个停顿。
- 把
<script>放在</body>前（非必须，但最简单有效） - 对非关键脚本加
defer：只适用于外部脚本，按顺序下载+执行，不阻塞解析 - 对完全独立的脚本（如统计、埋点）用
async：下载不阻塞，但执行时机不可控，可能早于 DOM 构建完成 - 避免内联大段 JS；若必须，确认它不依赖未解析的 DOM 节点
哪些 <link> 和 <meta> 会影响首屏速度
不是所有 <link> 都是“加载 CSS”，有些会触发预连接、预加载或提前解析资源，但也可能白忙一场。
-
<link rel="preload">只对明确知道马上要用的资源有效（如首屏大图、关键字体），错用反而抢占带宽 -
<link rel="preconnect">对跨域 CDN 有用（如https://fonts.googleapis.com），但别对十几个域名都加 -
<meta http-equiv="X-UA-Compatible">在现代项目中已无必要，IE 已淘汰，留着只是多几个字节 - 删掉没被任何工具读取的
<meta name="keywords">—— 搜索引擎早就不看了
DOM 结构臃肿的真实代价是什么
一个 2000 行的 HTML 文件，即使 gzip 后只有 80KB，也可能导致解析耗时翻倍，尤其在低端安卓设备上。
立即学习“前端免费学习笔记（深入）”；
- 嵌套超过 6 层的
<div>容易触发浏览器重排压力，检查是否能用flex或grid扁平化结构 - 服务端渲染（SSR）时避免生成大量空
<span>或<div class="">—— 这些节点仍要进 DOM 树 - 图片不用
<img src="placeholder.jpg">占位再 JS 替换，改用loading="lazy"+ 合理的srcset - 慎用
innerHTML = '<div>...</div>'拼接长模板，V8 解析 HTML 字符串比创建元素慢 3–5 倍
最常被忽略的一点：HTML 的编码声明位置。如果 <meta charset="utf-8"> 不在前 1024 字节内，浏览器可能先按 latin1 解析一部分，再重载，导致闪动或乱码——这不是玄学，是规范强制要求。
