CSS Academy · 课时

关键 CSS 与渲染阻塞

Q: 「关键 CSS 与渲染阻塞」这节课中我会学到什么？

内联首屏关键 CSS，并延迟加载非关键样式，以消除渲染阻塞。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

内联首屏关键 CSS，并延迟加载非关键样式，以消除渲染阻塞。

关键 CSS 与渲染阻塞 是 CoddyKit 上的免费 CSS Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

浏览器如何进行渲染

浏览器会将 HTML 解析为 DOM，将 CSS 解析为 CSSOM，再将两者合并为渲染树，执行布局，最后进行绘制。CSS 会阻塞渲染，直到 CSSOM 完成；关键路径上的每个 CSS 字节都会推迟首次绘制。

什么是关键 CSS

关键 CSS 是渲染首屏内容所需的最小样式集合。将其内联到 <style> 标签和 <head> 中，可以消除初始视图对阻塞渲染样式表的请求。

阻塞渲染的资源

头部中的任何 <link rel="stylesheet"> 都会阻塞渲染。没有 async 或 defer 的脚本也会阻塞 HTML 解析。减少阻塞渲染的资源可以直接改善最大内容绘制（LCP）和首次内容绘制（FCP）。

提取关键 CSS

像 critical（包管理器中的工具）、顶层工具和基于木偶师的提取器，都可以在指定的视口尺寸下渲染页面，并捕获应用于可见元素的样式。提取结果会被内联；完整样式表则会异步加载。

异步加载非关键 CSS

使用 media="print" 并在加载完成时切换，或使用 rel="preload" + as="style" + onload="this.rel='stylesheet'" 模式，可以在不阻塞的情况下加载完整样式表。

  <pre class="snippet">&lt;link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'"&gt;
&lt;noscript&gt;&lt;link rel="stylesheet" href="styles.css"&gt;&lt;/noscript&gt;</pre>

将媒体查询作为加载提示

使用不匹配的媒体查询（例如 media="print"）加载的 CSS 文件会以低优先级下载，并且不会阻塞渲染。这是加载样式表而不阻塞关键路径的经典技巧。

HTTP/2 与 CSS 拆分

借助 HTTP/2 多路复用，将 CSS 拆分为许多小文件的额外开销低于 HTTP/1。请仅加载每条路由所需的 CSS，例如 home.css 和 checkout.css，而不是加载包含每个页面样式的单体构建包。

CSS 与预加载 Scanner

浏览器的预加载 Scanner 会提前发现样式表 <link> 标签，并在 HTML 解析器到达这些标签之前开始下载。请确保样式表位于 <head> 中，而不是 body 中，这样预加载 Scanner 才能尽早发现它们。

衡量阻塞渲染的影响

Chrome 浏览器的 DevTools 网络面板会在瀑布图中显示资源阻塞时间。灯塔会报告“消除阻塞渲染的资源”，并列出每个资源的节省量。WebPageTest 会在其胶片视图中显示 renderBlockingResources。

服务器端关键 CSS

Next.js 和阿斯特罗等框架会在 SSR 期间自动内联关键 CSS。服务器会识别哪些样式适用于初始 HTML 并将其内联，无需客户端提取步骤。

实际权衡

内联过多 CSS 会增大 HTML 体积、减慢 TTFB 并降低缓存效率（HTML 的缓存时间不如 CSS 文件长）。请将内联关键 CSS 控制在 14KB 或更少，以适应 TCP 的第一个拥塞窗口。

知识检查

为什么阻塞渲染的样式表会延迟首次内容绘制？

总结

关键 CSS 会内联首屏样式，从而消除阻塞渲染的延迟。请使用预加载或媒体查询技巧异步加载剩余 CSS。使用灯塔和 DevTools 衡量影响，并将关键 CSS 负载控制在 14KB 以下，以获得最佳性能。

常见问题解答

「关键 CSS 与渲染阻塞」课时是免费的吗？

是的 — 「关键 CSS 与渲染阻塞」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「关键 CSS 与渲染阻塞」这节课中我会学到什么？

内联首屏关键 CSS，并延迟加载非关键样式，以消除渲染阻塞。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「关键 CSS 与渲染阻塞」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy