关键css必须内联至且≤14kb，以避免渲染阻塞；需提取首屏必需样式（如header、hero banner），禁用@import，非关键css用preload+onload异步加载。
关键 CSS 必须内联，且不能超 14KB
浏览器在解析 HTML 时，遇到 <link rel="stylesheet"> 就会暂停 DOM 构建和渲染，直到该 CSS 下载并解析完成。哪怕它只用在页脚，只要在 里，整个页面就卡在白屏状态。实测一个 200KB 的 main.css 在弱网下耗时 800ms，期间无任何内容输出。
解决办法是提取首屏必需样式（如 header、hero banner、按钮、@font-face），直接写进 的 <style></style> 标签里。不是整站 CSS，通常只占原始体积的 10%–30%。
- 必须放在所有
<link rel="stylesheet">之前，否则仍可能被后续资源拖慢 - 禁止在
<style></style>中使用@import——它会触发额外 HTTP 请求并阻塞解析 - 若启用 CSP，需加
nonce（如<style nonce="abc123"></style>）并在响应头中同步配置 - 内联内容建议控制在 ~14KB（gzip 后约 4–8KB），避免跨 TCP 包影响 TTFB
非关键 CSS 要异步加载，别用 @import
@import 是串行阻塞式加载，浏览器必须下载并解析完导入的 CSS 后，才继续处理后续样式表。它比 <link> 多一次网络往返和解析依赖，极易成为首屏瓶颈。常见错误：在 style.css 里写 @import "reset.css"，导致 FCP 延迟 300ms+。
正确做法是用原生方案延迟加载折叠区域、模态框、图表库等非首屏样式：
-
<link rel="stylesheet" media="print" onload="this.media='all'">：媒体不匹配时异步加载，匹配后立即生效；IE 不支持onload，需降级 fallback - 拆分文件 + 条件
media：比如dark-theme.css设为media="(prefers-color-scheme: dark)"，desktop.css设为media="(min-width: 1024px)" - 慎用
<link rel="preload" as="style">：它只提前下载，不改变应用时机；必须配对真实rel="stylesheet"，且两个href字符串必须完全一致（大小写、路径都不能差）
<link rel="preload"> 加 as="style" 才真正生效
很多人写 <link rel="preload" href="critical.css"> 却没加 as="style"，结果浏览器按普通 fetch 处理，根本不会提升优先级，也不会触发 CSS 解析流程。
正确写法必须包含三要素：rel="preload" + as="style" + onload 回调切换 rel：
<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="critical.css"></noscript>
注意：onload 里要立即设 this.onload=null 防止重复执行；<noscript></noscript> 是给禁用 JS 的用户兜底。
兼容性：Chrome 50+ / Firefox 64+ / Safari 11.1+ 支持；IE 完全不支持，必须靠 <noscript></noscript> 回退。
本地开发环境（如 XAMPP）也要开缓存和压缩
很多人在本地测试时忽略服务器配置，导致 CSS 加载慢被误判为代码问题。XAMPP 默认不启用静态资源缓存和 Gzip，每次刷新都重新传输完整 CSS 文件。
关键配置项（改完需重启 Apache）：
- 启用
mod_expires模块，在httpd.conf中取消注释：LoadModule expires_module modules/mod_expires.so - 添加缓存规则：
ExpiresByType text/css "access plus 1 week" - 启用
mod_deflate并配置：AddOutputFilterByType DEFLATE text/css，验证响应头含Content-Encoding: gzip - CSS 引用用绝对路径（如
/project/css/style.css），避免多级相对路径增加解析负担
这些改动在本地就能看到明显差异：首次加载后，CSS 直接从内存或磁盘缓存读取，不再走网络，TTFB 和加载时间大幅下降。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
