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'; )
