首屏白屏久但 domcontentloaded 早触发，是因为浏览器渲染需等待 cssom 构建完成、关键脚本执行及布局绘制，而非仅 dom 就绪；典型表现为 fcp 显著晚于 domcontentloaded，主因是外部 css 或 js 阻塞 crp。
为什么首屏白屏久，但 DOMContentLoaded 却早就触发了
因为浏览器渲染不等 DOM 就绪就结束——它必须等 CSSOM 构建完成、关键 script 执行完、布局和绘制都跑通，才能真正画出像素。常见现象是：DOMContentLoaded 在 800ms 触发，但 FCP（首次内容绘制）卡在 2.4s，说明 CRP 被阻塞在 CSS 或 JS 阶段，而非 HTML 解析本身。
典型线索：
-
Parse HTML后立刻挂起，Recalculate Style耗时长 → 外部 CSS 未就绪或选择器太重 - Network 面板里某
.css的Initiated by显示parser→ 它是同步阻塞资源 - 首屏文字闪一下才上色、按钮先无边框再突然出现 →
FOUC，基本坐实 CSS 加载延迟
link rel="stylesheet" 为什么一出现，HTML 解析就停
这是浏览器硬编码行为：遇到 <link rel="stylesheet">，立即中断 DOM 构建，发起网络请求，并且**必须等该 CSS 下载完成、解析成 CSSOM 后才继续解析后续 HTML**。哪怕文件只有 1KB、本地缓存命中、服务端返回 Cache-Control: max-age=31536000，也逃不过这次验证与解析的微小但确定的阻塞。
多个 <link> 串行加载时，第二份 CSS 的下载要等第一份 CSSOM 构建完才开始，形成链式阻塞。解决思路不是“压得更小”，而是“绕开它”：
- 把首屏必需的样式内联进
<style></style>，体积严格控制在 ~1KB 内（弱网下 TTFB 敏感） - 非首屏 CSS 用
media="print"或media="(max-width: 0)"临时屏蔽，再通过 JS 动态加载 - 用
<link rel="preload" as="style" href="main.css">提前拉取，但需配onload注入，否则不生效 - 避免手写内联 CSS —— 工具链必须介入：
critters（Webpack）、purgecss + html-webpack-plugin，否则漏掉.btn:hover、@media (min-width: 768px)或动态 class 如is-loading
script 放
位置只是表象，真正起作用的是属性。默认 <script src="app.js"></script> 是同步阻塞的：HTML 解析停 → 下载 → 执行 → 继续。无论放哪，只要没加属性，就卡 CRP。
真实选择逻辑：
- 首屏不需要交互？直接用
<script type="module" async src="app.js"></script>—— 现代浏览器自动按需加载且不阻塞解析 - 业务逻辑脚本（Vue 初始化、API 请求）→ 必须
defer：下载与解析并行，执行时机在 DOM 构建完成后、DOMContentLoaded前，且保持顺序 - 统计类脚本（如
analytics.js）→ 可用async，但务必自行判断document.readyState，否则可能在 DOM 未就绪时执行出错 - 绝对禁用
document.write()—— 现代浏览器已废弃，执行即清空当前文档
Performance 面板里真正该盯住的两个地方
别只刷 Lighthouse 分数。CRP 问题必须回归浏览器原生行为验证：
-
Performance 面板：录制时勾选
Screenshots和Web Vitals，重点看Parse HTML是否被Recalculate Style或Layout长时间挂起；再切到Network面板，筛选css和js，查Initiated by列是不是parser -
Elements 面板：右键任意元素 →
Reveal in Elements panel→ 查看 computed styles 是否来自外部 CSS 文件；若首屏元素样式显示为inherited或user agent stylesheet，说明关键 CSS 没生效
复杂点在于：CRP 不是单点问题，而是链式依赖。一个 link 阻塞、一个 script 同步执行、一个深层嵌套选择器导致 Recalculate Style 耗时飙升，三者叠加会让优化效果相互抵消。工具能帮你定位，但最终得靠对解析流程的直觉判断——浏览器先看到什么，就先做什么，这个顺序不能靠猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
