17370845950

应只为首屏必需且被HTML中引用的关键CSS使用preload，如main.css；需配合onload转为stylesheet，并内联极小关键CSS以优化FCP/LCP。

CSS 文件加载慢会导致页面渲染阻塞，出现白屏或样式闪烁。用 preload 提前加载关键 CSS 是有效解法，但要注意用对地方、避免误用。

什么时候该用 preload 加载 CSS

只对首屏必需、且被 HTML 中 引用的关键 CSS 使用 preload。比如主样式表（main.css）、重置样式（reset.css）或主题样式（theme.css）。非首屏、异步加载或媒体查询条件下的 CSS 不适合 preload。

• ✅ 推荐：在 中用
• ❌ 避免：为所有 CSS 都加 preload，会抢占带宽、干扰浏览器预加载优先级
• ⚠️ 注意：preload 不会执行 CSS，必须同时保留原始

preload + onload 补全执行逻辑

preload 只下载不应用，所以需配合 onload 将其转为可生效的样式表。否则资源下完了也没用。

• 写法示例：
  
• 兼容性处理：旧版 Safari 不支持 onload，可用 JS 回退：
  

验证是否生效：看 Network 和 Rendering 时间线

打开 Chrome DevTools → Network 标签，筛选 main.css，确认：

• Initiator 显示为 preload（不是 parser 或 script）
• Start Time 尽可能靠前，早于 HTML 解析完成时间
• 对比未加 preload 的版本，FCP（首次内容绘制）和 LCP（最大内容绘制）应有明显提前

若发现 preload 请求延迟或被取消，可能是路径错误、CORS 限制或服务器未正确返回 Content-Type: text/css。

比 preload 更进一步：内联关键 CSS

对于极小的关键样式（如首屏排版、字体、按钮基础样式），直接内联到 HTML 中，彻底消除请求。再配合 preload 加载剩余 CSS，效果更优。

• 工具推荐：PurgeCSS + Critical（自动提取首屏关键 CSS）
• 注意内联体积控制：一般不超过 14KB（避免触发 TCP 慢启动额外往返）
• 后续 CSS 仍用 ，确保可缓存、可复用