首屏白屏久但 domcontentloaded 很快，卡在 render tree 生成前：浏览器已解析完 html，但关键 cssom 未就绪、关键 js 未执行、或样式计算/布局被阻塞，导致 fcp > 2s。

首屏白屏久但 DOMContentLoaded 很快，卡在哪？

问题不在 DOM 构建慢，而在 render tree 生成前被卡住——浏览器已解析完 HTML，但 CSSOM 没就绪、JS 没执行完、或样式计算/布局被阻塞。典型表现是 FCP > 2s 而 domContentLoaded

用 Chrome DevTools Performance 面板录制，重点看 Parse HTML 后是否紧跟着长时间的 Recalculate Style 或 Layout；再切到 Network 面板，筛选 css 和 js，检查 Initiated by 列：若为 parser，说明该资源是在 HTML 解析中途同步拉取的，就是关键阻塞点。

• 常见错误：在 里写 <link rel="stylesheet" href="main.css">，没内联关键 CSS
• @import 在 CSS 文件里引入其他样式——它串行、不可并行、多一次往返，实测拖慢 FCP 300ms+
• document.write() 调用，现代浏览器已废弃，执行即清空文档流，不可恢复

关键 CSS 必须内联，但体积不能超多少？

内联是为了跳过网络请求，让 DOM 和 CSSOM 并行构建，直接缩短关键渲染路径。但它不是越大越好。

gzip 后建议控制在 4–8KB，原始体积别超 14KB（受 TCP 初始拥塞窗口限制）。超过这个值，HTML 主文档传输延迟上升，反而拖慢 TTFB 和首字节解析。

• 只提取首屏必需样式：.hero-title、.logo、.login-form、基础 @font-face 等
• 别手写，用 critters 或 purgecss + html-webpack-plugin 自动提取
• 非首屏 CSS 改用 <link rel="stylesheet" media="print" onload="this.media='all'"> 延迟加载
• 禁用所有 @import，尤其别在内联 <style></style> 里写

script 标签加 defer 还是 async？

不加属性的 <script src="app.js"></script> 是最危险的默认行为：HTML 解析立刻暂停，用户看到白屏。

按脚本用途选策略：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 业务逻辑脚本（Vue 初始化、API 请求、DOM 绑定）→ 必须用 defer：下载异步，执行在 DOM 解析完成后、DOMContentLoaded 前，且保持顺序
• 统计类、广告 SDK（如 analytics.js）→ 可用 async：下载完立刻执行，但时机不可控，需自行判断 document.readyState
• 极小同步逻辑（如注入 CSP nonce）→ 只能内联，且严格控制在 1KB 以内

把 <script></script> 放在 前只是兜底方案，不如 defer 可控，也无法保证多脚本执行顺序。

preload 写错反而拖慢首屏

preload 不是“提前加载所有东西”的开关，它是高优先级提示，写错会抢占带宽、挤掉 HTML 或关键 CSS。

只对当前导航中「确定马上要用」的资源生效：

• 关键字体：必须配 as="font" 和 crossorigin，否则无效
• 首屏 Hero 图：<link rel="preload" as="image" href="hero.jpg">，且确保它真出现在首屏
• 核心 JS 入口（如框架启动脚本）：仅限极少数情况，通常 defer 更优

容易被忽略的是：preload 的资源必须在当前页真实使用，否则 Network 面板会显示警告 “preload request was not used”。loading="lazy" 也一样——首屏图绝不能加，加了反而触发两次加载或不显示。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！