关键css必须内联首屏样式，剔除@import、字体及背景图等触发请求的规则，体积≤14kb；非关键css应preload+onload注入；需优化css质量，避免深层嵌套、无用规则和@import；首屏外内容用content-visibility: auto提升性能。
关键CSS必须内联，但别全塞进去
首屏白屏时间长，八成是因为浏览器卡在等外部 style.css 下载解析。把首屏真正用到的样式（比如 header、hero 区块、首屏按钮）直接写进 HTML 的 <style></style> 标签里，能立刻让浏览器开始绘制——这是最直接有效的解法。
但别手抖把整个 main.css 复制粘贴进去：@import、@font-face、带 url() 的 background-image 都得剔除，它们会触发额外请求，反而拖慢内联效果；体积也得控制，建议 ≤ 14 KB，否则影响 TTFB（首字节时间）。
- 工具推荐用
critical或penthouse自动提取，比人工筛快且准 - Next.js 等 SSR 框架可在
getServerSideProps里调用critical提前生成 - 如果首屏结构简单（如登录页），连工具都不用，手动摘出那十几条规则就行
非关键CSS不能靠 media="print" 假装不阻塞
很多人用 <link rel="stylesheet" href="footer.css" media="print"> 来“骗”浏览器跳过加载，其实这招只在部分旧浏览器有效。现代浏览器仍会下载它（只是不应用），仍占带宽和连接数，对首屏没帮助。
真要异步加载，得用 rel="preload" + onload 主动注入：
<link rel="preload" href="modal.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="modal.css"></noscript>
-
as="style"让浏览器知道这是高优先级样式资源，参与调度 -
onload里改rel才真正触发解析，避免阻塞主渲染流 -
<noscript></noscript>是底线保障，JS 被禁时回退为普通 link
别忽略 CSS 本身的质量问题
即使做了内联+异步，如果 CSS 里塞满低效写法，照样拖慢渲染树构建。重点盯三类问题：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 避免深层嵌套选择器（如
.page .section .container .item p），浏览器匹配成本高 - 删掉无用规则：用
PurgeCSS扫一遍，尤其组件库里你根本没用的 class - 禁用
@import：它强制串行加载，一个卡住全队列停摆，全换成<link>
顺手压缩一下文件体积——移除空格注释、合并重复声明，小项目也能省下 20%~30% 传输量。
首屏之外的内容，交给 content-visibility
长列表、折叠区域、底部版权栏这些用户滚动后才看到的东西，没必要一上来就参与布局计算。加一行 content-visibility: auto 就能让浏览器跳过渲染，等元素快进视口时再处理。
但必须配 contain-intrinsic-size 防止布局偏移：
.long-list-item {
content-visibility: auto;
contain-intrinsic-size: 0 500px; /* 高度预估，避免滚动抖动 */
}
这个属性兼容性已不错（Chrome 85+、Firefox 90+、Edge 85+），但 Safari 目前还不支持——如果目标用户大量用 Safari，就得降级用 IntersectionObserver 手动控制显示时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
