網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018

Calpa發表於2018-09-23

這次 Google 開發者大會請來了 Lighthouse 的工程師 - Eric Bidelman ，分享如何簡單地使用 Lighthouse, Puppeteer 來自動化我們日常的流程。它是一個開源的自動化工具，用於改進網路應用質量。您只需要提供網址，它就測試該頁面，並生成頁面效能報告。你看看可以採取哪些措施來改進您的應用。

網站效能調優開發工具: Lighthouse, Puppeteer 以及進階部分丨 Google 開發者大會 2018

Lighthouse 重視使用者的首次載入頁面速度，頁面首次顯示內容速度，有意義的內容顯示速度，以及可以互動的時間。

以一個頁面載入的週期為例，首先頁面會傳送第一個位元組給使用者，然後顯示一些非空白的影象，然後顯示有意義的內容，然後展示所有內容，允許使用者點選或其他操作，然後完結整個載入週期。

使用方法

執行 Lighthouse 的方式有兩種：作為 Chrome 擴充套件程式執行，或作為命令列工具執行。Chrome 擴充套件程式提供了使用者友好的介面，方便讀取報告。而命令列工具允許您將 Lighthouse 整合到持續整合系統。

開發者工具

你只需要開啟 Chrome 的開發者工具，點選 Audits，然後就可以看到 Lighthouse 介面：

擴充套件程式

你可以到 chrome web store 下載並安裝 Lighthouse Chrome 擴充套件程式。

命令列工具

需求：Node.js >= 5

全域性安裝 lighthouse

npm install -g lighthouse
複製程式碼

然後輸入你的頁面

lighthouse https://example.com
複製程式碼

lighthouse 會自動生成 HTML 報告，你也可以使用 JSON 格式。

自動化部分

你也可以利用 TravisCI 來自動分析改動後的程式碼對於頁面效能的影響。

你只需要在 .travis.yml 裡面加入以下程式碼：

language: node_js
script:
  - npm run lint
  - npm run build
after_success:
  - ."./travis/deploy_pr_gae.sh"
  - export LH_MIN_PASS_SCORE=96
  - export LH_TEST_URL=https://your.staging.server.com/
  - node travis/runlighthouse.js $LH_TEST_URL $LH_MIN_PASS_SCORE
複製程式碼

更多詳情可以觀看講師在 Github 上面的分享： ebidel/lighthouse-ci

Puppeteer

底層

在談 Puppeteer 之前，我們需要提到上面是 Headless Chrome。簡單來說，它是一個沒有檢視層的谷歌瀏覽器。

它允許你使用最新的瀏覽器來測試頁面，使用所有最新的屬性，比如說 CSS Grid 格局，Web 推送通知等。

最重要的是，它暴露開發者工具的可程式設計介面，比如說網路狀況，模擬裝置，程式碼覆蓋率。

例如你可以開啟一個 WebSocket，然後監聽瀏覽器發生了什麼操作，比如說 CSS 的 getStyleSheetText，DOM 的markUndoableState等。

你也可以到官網閱讀更加豐富的文件：chromedevtools.github.io/devtools-pr…

實戰部分

大部分你手動在瀏覽器裡面做的事情，它都可以做到。例如：

截圖並生成 PDF
自動填寫表格，UI 測試，鍵盤輸入
測試 Chrome 外掛

安裝方法

它會下載最新版本的 Chromium，以及暴露封裝好的介面出來給開發者使用。

值得注意的是，它的原始碼有很多 async/await 的操作，你也可以這樣操作你的程式碼。

npm i puppeteer --save
複製程式碼

講師也提供了很多例子，方便學習使用 Puppeteer。

截圖

比如說我要把 https://example.com 頁面截圖，儲存為 example.png。我只需要寫幾行程式碼：

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://example.com");
  await page.screenshot({ path: "example.png" });

  await browser.close();
})();
複製程式碼