摘要：大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
css 文件的请求可能会显著增加网页渲染所需的时间， 原因是默认情况下浏览器会延迟页面渲染，直到完成加载、解析和执行页面 中引用的所有 CSS 文件，从而完成页面布局的计算。
不幸的是，如果页面有一个非常大的 CSS 文件并且需要一段时间才能下载，用户最终将等到整个文件下载完成后才能开始渲染页面，而优化关键渲染路径就是为了解决此类问题。
关键渲染路径表示浏览器渲染页面所采取的步骤，开发者要找到使页面渲染给用户所需的最小阻塞 CSS 或关键 CSS。而关键资源是可能阻止页面初始渲染的任何资源，关键 CSS 是向用户渲染第一屏内容所需的最小阻塞 CSS 集。
在上面的示例中，网页关键部分只是用户第一次加载页面时可以看到的内容，即应用于首屏元素的 CSS，对于其余 CSS 部分则可以异步加载。而 确定页面关键 CSS 相当复杂，需要遍历整个网页的 DOM。
在渲染（可视化）页面之前，浏览器必须加载、解析和执行 head 标记中引用的所有 CSS 文件。这就是为什么 CSS（如 JavaScript）默认是阻塞渲染的，如果 CSS 文件太大，页面速度会受到严重影响。
此外，像 WordPress 这样的内容管理系统 (CMS) 有时默认会指向多个样式表。 浏览器必须下载所有这些样式文件，最终影响页面速度。因此，外部 CSS 文件可以阻止首屏内容，直到浏览器渲染页面的其余部分，这就是 PSI 所说的“阻塞渲染 CSS”的含义。
不过，实际性能并不是唯一的问题，未优化的 CSS 也会损害感知性能，增加跳出率并降低转化率。
这就是 CriticalCSS 的闪光点，通过将关键 CSS 放置在 HTML 文件的 head 标签中而不是外部样式表中从而解决以上问题。
首先，浏览器在可视化首屏内容之前不必渲染整个页面，可以轻松找到关键 CSS，因为不需要在单独的位置查找。第二，外部 CSS 文件（非关键 CSS）变得更轻并且异步加载，从而减少实际加载时间。第三，通过为用户提供即时查看的内容来改善用户体验。当然，加载整个页面可能需要更长的时间，但首屏内容都显示得很快。
这么做的目标是将 CSS 分为两部分，即关键部分和非关键部分。
首先，需要检查网站所有页面的文档对象模型 (DOM)，浏览页面上的每个元素并考虑应用于它的样式。
同时还必须考虑不同的设备视口。 例如，桌面和移动设备上的主页：
两个版本完全不同，而且必须分别为每个视口设置关键 CSS，Chrome 的 DevTools 还可以帮助开发者进行 CSS 分析。
打开要分析的页面，右键单击并选择“检查”。打开“覆盖范围”选项卡，然后单击“重新加载”按钮。然后会生成一份详细报告，并找到关键（绿色）与非关键（红色）CSS 的可视化。
可以提取所有绿色 CSS 并将其放置（内联）到 HTML 文档的 head 标记中。
在配置关键 CSS 时，使用工具可以节省大量时间并减少麻烦。
例如，NitroPack 自动获取可视化首屏内容所需的 CSS 并将其内联，同时为每个页面（不是页面类型）创建独特的关键 CSS。
使用 NitroPack 可以大幅提升网站速度，无需任何编码技能。 其他工具，例如： Sitelocity 或 Critical Path CSS generator 也可以帮助提取关键 CSS，开发者只需输入网站的网址并等待即可。
注意：这些工具可以参考文末的资料，不过像 NitroPack 属于收费产品。当然，也可以使用一些开源产品。
Penthouse 是原始的关键路径 CSS 生成器，可帮助开发者加快网站的页面渲染速度， 提供网站的完整 CSS 以及想要为其创建关键 CSS 的页面，Penthouse 将返回完美渲染页面折叠内容之上所需的关键 CSS。
Penthouse 的抽取过程是完全自动的，生成的 CSS 可以直接用于生产环境。本质上， Penthouse 在幕后使用 puppeteer 通过 chromium:headless 生成关键的 css。
penthouse({url: 'http://google.com',cssString: 'body { color: red }',}).then((criticalCss) => {// use the critical cssfs.writeFileSync('outfile.css', criticalCss);});Critical 是另一个工具（依赖于 Penthouse），用于从 HTML 中提取并内联关键路径（首屏）CSS。支持以下特性：
生成关键路径 CSS生成具有多种分辨率的关键路径 CSS生成关键路径 CSS 并忽略特定选择器生成关键路径 CSS 并指定资源路径自定义行为const critical = require('critical');critical.generate({// configuration},(err, output) => {if (err) {console.error(err);} else if (output) {console.log('Generated critical CSS');}});Critical 和上面的 Penthouse 之间的主要区别是：
Critical 会自动从 HTML 中提取样式表，并从中生成关键路径 CSS，而其他模块通常要求开发者预先指定这一点。Critical 提供了内联关键路径 CSS 的方法由于 Critical 同时处理生成和内联，因此能够抽象出一些样板文件，否则需要分别解决这些问题。总之，如果网站或应用程序有大量样式或动态注入到 DOM 中的样式（有时在 Angular 应用程序中很常见），建议直接使用 Penthouse。 Penthouse 要求开发者预先提供样式，但如果发现 Critical 不能满足需求，可以直接考虑 Penthouse。
当然，除了 Penthouse、Critical 外，criticalCSS 也是值得考虑的一个项目。类似于 Penthouse ，criticalCSS 会查找并输出页面的关键路径 CSS。
当启用 Priority_ritic_css 过滤器时，适用于 nginx、apache、IIS、ATS 和 Open Lightspeed 的 PageSpeed Optimization 模块可以自动完成所有繁重的工作。
关键 CSS 抽取都是通过内置无头浏览器来处理，等到浏览器 Run 起来后，再通过 css-tree 将读到的样式表内容转为 AST 语法树，接着遍历 DOM 里每个元素看匹配结果，最终把匹配到的样式变为内联。
关键CSS也有自己的局限性：
无论是 style 引入还是直接内联样式都可以，但一定得有才行，不能是首屏渲染完再生成出来的 DOM。所以对 SPA 帮助不大，但如果带 Pre-Rending 的会有一定帮助。critical CSS 的目的是提升接收到 HTML 之后的首次渲染效率，而不是等 JS 加载完，主打的是之间的一个时间差，毕竟 JS 可能非常大。如果 JS 都加载完了、都能通过 JS 渲染出 DOM 了， critical 也无法发挥作用了。来源：潜水侠科技