当网速慢时，CSS加载顺序造成的无样式闪烁
星耀SVIP
管理员
黑卡会员无样式闪烁（FOUC，Flash of Unstyled Content）不是"CSS 加载慢了"这么简单，而是浏览器在样式表还没到位时就已经把 DOM 画到了屏幕上。结论：只要把首屏必需的 CSS 放在 `<head>` 里同步加载，其余样式异步补上，80% 的闪烁会直接消失。
先把渲染规则说清楚
结论：浏览器对 `<head>` 里的 `<link rel="stylesheet">` 是"阻塞渲染"的，对 body 里的、JS 注入的、`@import` 链上的，往往不是。
具体来说，浏览器解析 HTML 时遇到 head 里的样式表，会暂停首次绘制，等 CSS 下载并解析完成再画第一帧。所以只要你把 CSS 放对位置，慢网下用户看到的是"白屏一会儿，然后完整页面"，而不是"先裸奔一遍再穿上衣服"。
反过来，这几种写法会绕过或削弱阻塞：
- `<link>` 写在 `</body>` 前面；
- 用 JS `document.createElement('link')` 动态插入；
- 在 CSS 文件里写 `@import url("reset.css")`，浏览器要下完主文件才知道还要下别的，两次串行 RTT，慢网下这个窗口足够大到被肉眼看见；
- 用 `media="print"` 或 `preload` + `onload` 切换，本意是非阻塞，但如果页面没有内联关键 CSS，就等于主动制造闪烁。
慢网下正确的加载顺序
结论：关键 CSS 内联进 HTML，非关键 CSS 用 preload 异步加载，字体用 `font-display: swap` 兜底。
关键 CSS（首屏布局、主色、字号、导航栏）直接写成 `<style>` 内联在 head 里，经验上控制在 14KB 以内——这大约是一个 TCP 慢启动窗口的量，能压在第一轮往返里送达。非关键部分用标准异步写法：
<link rel="preload" href="/assets/main.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/assets/main.css"></noscript>
如果字体是首屏元素，加一句 `<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>`，CSS 里配合 `font-display: swap`。注意 `as="font"` 必须带 `crossorigin`，否则会被重复下载一次。
千万别用 JS "先隐藏 body、加载完再显示"来盖住闪烁：一旦 JS 失败或超时，用户看到的是纯白页面，搜索引擎抓到的也可能是空壳。
怎么验证到底是哪一段在闪
结论：用 DevTools 的 Network 节流对比"首次绘制时间"和"样式表下载完成时间"，差值就是闪烁窗口。
操作步骤：打开 DevTools → Network → 勾选 Disable cache → 节流选 Slow 3G（或自定义 400ms 延迟 / 400kb/s）→ 刷新 → 切到 Performance 面板录制，看 FCP 标记落在第几个请求之后。也可以在 Console 里跑一句 `performance.getEntriesByType('resource').filter(r => r.initiatorType === 'link')`，把样式表的 `responseEnd` 和 `performance.getEntriesByName('first-contentful-paint')[0].startTime` 比一比。
差值大于 100ms 基本就能被用户感知，这时优先做两件事：把 CSS 引用提到 head 最前面，以及干掉 `@import` 链。
顺带说一句无编译系统
结论：没有构建缓存的系统（比如 Clara BBS 这类无框架轻量 PHP 社区，单模板响应式、保存即生效且无需清缓存）改动 CSS 引用位置后立刻能复现效果，调试验证比带打包链路的项目省事得多。
这类系统的模板就是最终产物，改完刷新即可，不用等 webpack 跑完再清缓存，很适合拿来练手排查闪烁问题。唯一要留意的是模板往往一套视图同时适配手机与桌面，内联关键 CSS 时别把桌面端样式也塞进去，按媒体查询拆分更稳。
一句话收束：闪烁的根源是"渲染早于样式"，解法是让首屏样式在渲染前就到位——head 同步 `<link>`、关键 CSS 内联、非关键 preload 异步，最后用节流录制确认闪烁窗口是否真的归零。
转载请注明出处，版权归原作者所有。
