删掉没用的空白和注释、避免内联大量CSS/JS、用语义化标签替代div堆砌、图片不用data URL——这些措施能显著减少DOM节点数和解析负担，从而加快HTML解析速度。
HTML文档体积大，直接拖慢浏览器解析速度——不是因为网络下载慢，而是因为 HTML 解析是单线程、阻塞式的过程，体积越大，document.write 或 DOM 构建耗时越长，首屏可交互时间（TTI）越晚。
删掉所有没用的空白和注释
HTML 中的换行、缩进、空格、<!-- 注释 --> 在浏览器眼里全是文本节点，都会被 parser 读入、建树、再丢弃。生产环境不压缩的话，这部分常占体积 15%–30%。
- Webpack 用户可用
html-webpack-plugin配置minify: { removeComments: true, collapseWhitespace: true } - Vite 用户默认已启用，但检查
vite.config.ts中是否误设了build.minify: false - 纯静态站点可用命令行工具：
html-minifier-terser --collapse-whitespace --remove-comments index.html -o index.min.html - 注意：不要删掉
<pre>、<textarea>内部的空白，否则会破坏内容格式
避免内联大量 CSS/JS，尤其别在 <head> 里塞完整框架
内联脚本和样式不会触发网络请求，但会延长 HTML 解析时间——浏览器必须同步解析并执行它们，才能继续构建 DOM。一个 200KB 的内联 <script> 可能让 parser 卡住上百毫秒。
- 把框架代码（如 React、Vue）全部外链，利用浏览器缓存；
<script src="react.18.3.js"></script> - 业务关键 CSS 可内联，但建议控制在 10KB 以内；超过就拆成
<link rel="preload" as="style">+<link rel="stylesheet"> - 绝对不要在
<head>里写<script>fetch(...).then(...)</script>—— 它会阻塞 parser，且 fetch 还没发出去，DOM 树都没建完
用语义化标签替代 div 堆砌，减少 DOM 节点数
DOM 节点越多，parser 创建 Node 对象、建立父子关系、触发 layout/reflow 的开销越大。一个无意义的 <div><div><div><p>文字</p></div></div></div> 比 <article><p>文字</p></article> 多建 3 个节点，内存占用高、遍历慢、事件委托效率低。
立即学习“前端免费学习笔记（深入）”；
- 优先使用
<header>、<nav>、<main>、<section>、<article>、<aside>、<footer> - 避免为了“兼容旧浏览器”而降级写法——现代浏览器对语义标签解析速度 ≥
<div>，且更利于无障碍和 SEO - 用浏览器 DevTools 的 Elements 面板按
Ctrl+Shift+F搜<div class=，快速定位可替换区域
图片资源不放 HTML 里，更别用 data URL
<img src="data:image/png;base64,..."> 看似“免请求”，实则让 HTML 文件暴涨几百 KB，还强制 parser 解码 Base64 字符串，严重拖慢解析。而且 data URL 无法被缓存、不能被 CDN 分发、不支持懒加载。
- 所有图片必须走外链：
<img src="/assets/logo.svg" alt="logo"> - SVG 图标优先用
<svg>内联（小图标），但仅限单色、结构简单、复用频繁的场景 - 若必须动态插入图片，用
document.createElement('img')+img.src = url，而不是拼接含 data URL 的字符串再innerHTML = ...
真正卡住 HTML 解析的，往往不是那些“看起来很大”的东西，而是你没意识到它会被 parser 当成有效内容处理——比如一段被遗忘的注释、一个本该外链却硬塞进 <head> 的 150KB 工具库、或者嵌套 7 层的 <div>。解析耗时优化的关键，在于让 parser 尽可能少做“无意义工作”。
