網站性能調優開發工具：Lighthouse，Puppeteer 以及進階部分丨 Google 開發者大會 2018

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

Imgur

Lighthouse 重視用戶的首次加載頁面速度，頁面首次顯示內容速度，有意義的內容顯示速度，以及可以交互的時間。

以用戶為中心的績效指標

以一個頁面加載的周期為例，首先頁面會發送第一個字節給用戶，然後顯示一些非空白的圖像，然後顯示有意義的內容，然後展示所有內容，允許用戶點擊或其他操作，然後完結整個加載週期。

頁面加載週期

使用方法

運行 Lighthouse 的方式有兩種：作為 Chrome 擴展程序運行，或作為命令行工具運行。Chrome 擴展程序提供了用戶友好的界面，方便讀取報告。而命令行工具允許您將 Lighthouse 集成到持續集成系統。

開發者工具

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

DevTools

擴展程序

你可以到 chrome web store 下載並安裝 Lighthouse Chrome 擴展程序。

Chrome Extension

命令行工具

除了使用瀏覽器之外，你也可以使用命令行工具來調試你的網站。

Node CLI

需求：Node.js >= 5

全局安裝 lighthouse

npm install -g lighthouse

然後輸入你的頁面

lighthouse https://example.com

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

Report

自動化部分

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

Github + Travis

結果

你只需要在 .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。簡單來說，它是一個沒有視圖層的谷歌瀏覽器。

Headless Chrome

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

最重要的是，它暴露開發者工具的可編程接口，比如說網絡狀況，模擬設備，代碼覆蓋率。

DevTools Protocol

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

你也可以到官網閱讀更加豐富的文檔：https://chromedevtools.github.io/devtools-protocol/

實戰部分

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

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

安裝方法

Imgur

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

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

npm i puppeteer --save

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

截屏

PPTR 101: 截屏

比如說我要把 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();
})();