页面闪烁是因为关键CSS未抢在首次渲染前加载，浏览器需等全部CSS解析完才绘制，导致白屏或错位；解决方法是用rel="preload" as="style"预加载并onload切换为stylesheet，配合noscript兜底，且关键CSS须精准提取首屏必需样式。

为什么页面会闪烁？关键CSS没抢在渲染前加载

页面首次加载时白屏或闪动，往往不是JS慢，而是浏览器默认的CSS加载机制导致：它把 <link rel="stylesheet"> 当作“非阻塞资源”，实际却会阻塞渲染——但前提是这些CSS没被提前识别为关键路径。如果关键样式（比如首屏文字颜色、布局容器宽高）藏在大型CSS文件里，又没被优先提取，浏览器就得等整张CSS下载解析完才敢画第一帧，中间就是白屏或错位闪烁。

怎么标记关键CSS？用 rel="preload" + as="style"

单纯把CSS <link> 放在 <head> 顶部还不够。必须让浏览器知道：“这玩意儿现在就要用，别排队”。做法是加一条预加载指令：

<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

注意三点：

• rel="preload" 是声明意图，不触发应用；as="style" 告诉浏览器这是样式表，参与资源优先级调度
• onload 回调里切换成 rel="stylesheet" 才真正生效，避免重复加载
• 不能省略 onload 处理——否则预加载了但不应用，等于白干

哪些CSS算“关键”？别打包，要手动拆分

所谓关键CSS，只包含首屏渲染必需的规则，比如：.header、.hero-text、body 字体/背景、栅格容器基础宽度。它不该含折叠区域、弹窗、暗色模式切换器的样式——那些可以延后加载。

立即学习“前端免费学习笔记（深入）”；

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

实操建议：

• 用 Chrome DevTools 的 Coverage 面板（Ctrl+Shift+P → “Coverage”）跑一遍首屏操作，看哪些CSS行被实际用到
• 用工具如 penthouse 或 critical npm 包自动生成，但务必人工核对：生成结果常漏掉媒体查询中的关键断点
• 不要把关键CSS内联进HTML（<style>），体积超 14KB 会触发HTTP/2流优先级降级，反而拖慢

兼容性与 fallback 怎么处理？IE和旧版Safari不认 preload

rel="preload" 在 IE 和 Safari ≤12.1 中被忽略，但不会报错。问题在于：如果不做降级，这些浏览器就退回到普通 <link> 加载，失去抢占优势。

稳妥做法是并存两套引用：

<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><br><noscript><link rel="stylesheet" href="critical.css"></noscript><br><link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

说明：

• <noscript> 内的 <link> 是给不支持 preload 的浏览器兜底，且不触发JS执行
• 非关键CSS用 media="print" 初始屏蔽，靠 onload 切回 media="all" 延迟加载，避免阻塞
• 别依赖 document.write 或动态 appendChild 插入关键CSS——DOM Ready 前可能已错过渲染时机

真正难的不是写对那几行 <link>，而是持续识别哪些样式属于“关键”：组件复用、A/B测试分支、服务端特征开关，都会让首屏样式边界浮动。每次发版前都得重跑 Coverage 检查。