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

時間 2019-11-07

標籤網站性能開發工具 lighthouse puppeteer 以及進階部分 google 開發者大會欄目網站開發简体版

原文原文鏈接

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

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

以一個頁面加載的週期爲例，首先頁面會發送第一個字節給用戶，而後顯示一些非空白的圖像，而後顯示有意義的內容，而後展現全部內容，容許用戶點擊或其餘操做，而後完結整個加載週期。github

使用方法

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

開發者工具

你只須要打開 Chrome 的開發者工具，點擊 Audits，而後就能夠看到 Lighthouse 界面：chrome

擴展程序

你能夠到 chrome web store 下載並安裝 Lighthouse Chrome 擴展程序。npm

命令行工具

需求：Node.js >= 5編程

全局安裝 lighthouse

npm install -g lighthouse
複製代碼

而後輸入你的頁面

lighthouse https://example.com
複製代碼

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

自動化部分

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

你只須要在 .travis.yml 裏面加入如下代碼：bash

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();
})();
複製代碼