主线程阻塞在Parse HTML任务块处，其前后紧挨着Evaluate Script或Recalculate Style任务；右键长任务可查看调用栈定位具体HTML标签（如未加async/defer的script或靠前的link），document.write()会引发整页重解析导致Parse HTML异常跳涨。
主线程阻塞在哪？用 Performance 面板直接定位解析耗时
HTML 解析本身是同步、单线程的，一旦遇到 <script>（尤其未加 async 或 defer）、阻塞式 <link rel="stylesheet">，或超大内联 <style>，主线程就会卡住。Chrome DevTools 的 Performance 面板能精确到毫秒级还原这一过程。
实操建议：
- 打开 DevTools →
Performance→ 点击录制（刷新页面）→ 停止后展开Main线程轨道 - 重点关注
Parse HTML任务块的持续时间，以及它前后是否紧挨着Evaluate Script或Recalculate Style - 右键任一长任务 →
View call stack，可看到具体哪一行 HTML 触发了解析暂停（比如某个<script src="vendor.js">标签位置） - 注意：
Parse HTML时间包含 DOM 构建 + 同步脚本执行，不是纯词法/语法解析耗时
document.write() 是毫秒级阻塞的「隐形炸弹」
现代页面中几乎见不到显式 document.write()，但它可能藏在第三方 SDK、老版广告脚本或兼容性 fallback 里。只要在文档关闭后调用，它会强制清空当前文档并重建 parser，导致整页重解析——典型表现是 Parse HTML 任务突然跳涨 50–200ms 且无对应 HTML 标签。
排查与规避：
立即学习“前端免费学习笔记（深入）”；
- 在控制台执行
console.log(document.write.toString())，若输出非原生函数体（如被重写），说明已被劫持 - 启动 Chrome 时加参数
--disable-document-write（仅开发环境），触发报错而非静默阻塞 - 用
beforeunload监听器临时捕获：如果页面还没load就触发了beforeunload，大概率有document.write()在作祟 - 禁止任何运行时动态写入 HTML 字符串到
document（包括document.body.innerHTML += ...）
样式表加载顺序直接影响 HTML 解析中断点
CSS 不会阻塞 HTML 解析本身，但会阻塞解析后的渲染树构建；而浏览器为避免 FOUC，会在遇到 <link rel="stylesheet"> 时暂停「脚本执行」和「DOM 构建后续步骤」，直到 CSSOM 就绪。这意味着：即使 HTML 已解析完一半，一个靠前的未完成 CSS 请求仍会让主线程停在 Parse HTML 状态里「假装还在解析」。
关键判断依据：
- 在
Network面板看css资源是否长时间处于Pending或stalled - 把
<link>移到<body>底部？不行——它必须在<head>才能参与首次渲染，且移出<head>会导致解析器反复回溯 - 真正有效的是：对非首屏 CSS 使用
media="print"+ JS 动态切换，或用rel="preload"提前拉取关键 CSS - 避免
@import：它在 CSS 文件内部引入资源，会引发额外网络往返，延长 CSSOM 就绪时间
自定义元素（Custom Elements）升级过程会打断解析流
当 HTML 解析器遇到已注册的 customElements.define('x-foo', ...) 对应的标签（如 <x-foo>），它不会立刻实例化，而是标记为「upgrade candidate」；等解析完成、DOM 构建完毕后，再批量调用 connectedCallback。但如果该回调里执行同步 DOM 操作（如 this.appendChild(...)），就可能触发新一轮微任务或样式计算，间接拉长主线程占用。
优化要点：
- 升级阶段（
constructor和connectedCallback）内禁止访问getComputedStyle、offsetHeight等强制布局的 API - 避免在
connectedCallback中立即fetch或创建WebComponent子树——改用requestIdleCallback或setTimeout(..., 0)延后 - 检查
customElements.whenDefined('x-foo')返回的 Promise 是否在解析早期就被 await，这会直接让解析器等待 - 使用
ElementInternals替代手动管理 shadow DOM，减少升级开销
async 的 <script>、一行被忽略的 document.write()，或一个未预加载的关键 CSS —— 它们不报错，只悄悄拖慢首屏，而且只有在 Performance 面板里放大到 5ms 刻度才能看清。 
