penthouse
2.3.3
关键路径 CSS 生成器
Penthouse 是原始的关键路径 CSS 生成器，可帮助您加快网站的页面渲染速度。提供您网站的完整 CSS 以及您想要为其创建关键 CSS 的页面，Penthouse 将返回完美呈现页面折叠内容之上所需的关键 CSS。在这里阅读有关关键路径 CSS 的更多信息。
该过程是自动的，生成的 CSS 可以直接用于生产。 Penthouse 在幕后使用 puppeteer 通过 chromium:headless 生成关键的 css。
（如果您不想编写代码，可以使用在线托管版本。）
yarn add --dev penthouse
（或者npm install ，如果不使用纱线）
penthouse ( {
url : 'http://google.com' ,
cssString : 'body { color: red }'
} )
. then ( criticalCss => {
// use the critical css
fs . writeFileSync ( 'outfile.css' , criticalCss ) ;
} )https://github.com/pocketjoso/penthouse/tree/master/examples
Penthouse 针对并行运行多个作业进行了优化。重复使用一个共享浏览器实例，每个作业都在其自己的浏览器选项卡中运行。在您的计算机开始耗尽资源之前，您只能并行运行这么多作业。要有效地运行多个作业，请参阅多个 url 示例。
仅url和cssString是必需的 - 所有其他选项都是可选的。请注意，通过url找到的 html 文件预计会被设置样式； penthouse不注入任何样式，它只是使用cssString （或css ）来修剪关键的 css。
| 姓名 | 类型 | 默认 | 描述 |
|---|---|---|---|
| 网址 | string | 可访问的网址。对本地 html 文件使用file:///协议。 | |
| CSS字符串 | string | 从中提取关键 css 的原始 css | |
| CSS | string | 磁盘上原始 css 文件的路径（如果使用而不是cssString ） | |
| 宽度 | integer | 1300 | 关键视口的宽度 |
| 高度 | integer | 900 | 关键视口的高度 |
| 截图 | object | 屏幕截图的配置（默认情况下不使用）。请参阅屏幕截图示例 | |
| 保持更大的媒体查询 | boolean | false | 即使宽度/高度值大于关键视口，也要保持媒体查询。 |
| 强制包含 | array | [] | 即使没有出现在关键视口中，也要保留在关键 CSS 中的 CSS 选择器数组。字符串或正则表达式 (fe ['.keepMeEvenIfNotSeenInDom', /^.button/] ) |
| 强制排除 | array | [] | 要在关键 CSS 中删除的 CSS 选择器数组，即使出现在关键视口中也是如此。字符串或正则表达式 (fe ['.doNotKeepMeEvenIfNotSeenInDom', /^.button/] ) |
| 要删除的属性 | array | ['(.*)transition(.*)', 'cursor', 'pointer-events', '(-webkit-)?tap-highlight-color', '(.*)user-select'] ] | 从关键 CSS 中过滤掉的 CSS 属性 |
| 暂停 | integer | 30000 | 多发性硬化症;在此时间后中止关键 CSS 生成 |
| 木偶师 | object | 傀儡师的设置。请参阅自定义 puppeteer 浏览器示例 | |
| 页面加载跳过超时 | integer | 0 | 多发性硬化症;在此时间后停止等待页面加载（对于页面加载事件不可靠的网站） |
| 渲染等待时间 | integer | 100 | 多发性硬化症;页面加载后关键 css 提取开始之前的等待时间（如果使用的话，也在拍摄“之前”屏幕截图之前） |
| blockJS请求 | boolean | true | 设置为 false 加载 JS（不推荐） |
| 最大EmbeddedBase64长度 | integer | 1000 | 人物;删除大于此的内联 Base64 编码资源 |
| 最大元素检查每个选择器 | integer | undefined | 可以指定限制每个 css 选择器检查的元素数量，从而减少执行时间。 |
| 用户代理 | string | 'Penthouse Critical Path CSS Generator' | 指定加载页面时使用哪个用户代理字符串 |
| 自定义页眉 | object | 设置与 url 请求一起发送的额外 http 标头。 | |
| 曲奇饼 | array | [] | 有关每个 cookie 的格式，请参阅 Puppeteer setCookie 文档 |
| 严格的 | boolean | false | 让 Penthouse 在解析原始 CSS 时抛出错误。传统选项，不推荐。 |
| 允许响应码 | number|regex|function | 如果服务器响应代码与该值不匹配，则让 Penthouse 停止。 number和regex类型根据response.status()进行测试。还允许使用function并获取 Response 作为参数。该函数应该返回一个boolean 。 |
日志记录是通过penthouse命名空间下的debug模块完成的。您可以在其文档中查看有关日志记录的更多信息。
# Basic verbose logging for all components
env DEBUG= " penthouse,penthouse:* " node script.js安装缺少的依赖项以使无头 Chrome 运行：
sudo apt-get install libnss3
您可能需要更长的部门列表，具体取决于您的地区，请参阅此答案
良好的第一步可以是在托管关键路径 css 生成器中测试您的 url + css，以确定问题是否出在您传递的输入（css + url）上，或者是否出在您的本地设置上：https://jonassebastianohlsson.com /关键路径CSS生成器
如果您在应用关键 CSS 后看到闪烁的无样式内容，则说明有问题。以下是最常见的原因和一些一般相关建议：
一般来说，您必须确保您想要在关键 CSS 中设置样式的所有元素都出现（可见）在页面的 HTML 中（禁用 Javascript）。页面的第一次渲染（关键的 css 有助于加快速度）发生在 JS 加载之前，这就是 Penthouse 在禁用 JavaScript 的情况下运行的原因。因此，如果您的 html 本质上是空的，或者您的真实内容在加载旋转器或类似内容之前被隐藏，那么您必须先解决这个问题，然后才能获得使用关键 CSS 的性能优势。
如果您的 html 很好，但根据登录用户、第三方广告等因素而有所不同，那么您可以使用forceInclude参数强制特定的额外样式保留在关键 css 中，即使 Penthouse 没有看到它们在关键 CSS 生成期间出现在页面上。
如果您有一个元素出现在 DOM 的早期，但应用了样式以移出关键视口（使用绝对位置或变换），则可能会发生此问题。 Penthouse 不会查看绝对位置和变换值，只会将元素视为不属于关键视口的一部分，因此 Penthouse 不会认为其样式是关键的（因此，当使用关键 css 时，将显示无样式元素）。解决方案：考虑它是否真的应该出现在 DOM 中这么早，或者使用forceInclude属性来确保“隐藏”/移动它的样式保留在关键 css 中。
转换后遇到 → 等特殊字符的问题？确保在 CSS 中使用正确的十六进制格式。您始终可以通过输入 '→' .charCodeAt(0).toString(16)从浏览器控制台获取此格式（此箭头字形的答案是2192 ）。在 CSS 中使用十六进制格式时，需要在前面加上反斜杠，如下所示： 2192 (fe content: '2192'; )
