网站性能调优开发工具: Lighthouse, Puppeteer 以及进阶部分丨 Google 开发者大会 2018

26,880 阅读4分钟

这次 Google 开发者大会请来了 Lighthouse 的工程师 - Eric Bidelman ,分享如何简单地使用 Lighthouse, Puppeteer 来自动化我们日常的流程。它是一个开源的自动化工具,用于改进网络应用质量。您只需要提供网址,它就测试该页面,並生成页面性能报告。你看看可以采取哪些措施来改进您的应用。

Lighthouse 重视用户的首次加载页面速度,页面首次显示内容速度,有意义的内容显示速度,以及可以交互的时间。

以一个页面加载的周期为例,首先页面会发送第一个字节给用户,然后显示一些非空白的图像,然后显示有意义的内容,然后展示所有内容,允许用户点击或其他操作,然后完结整个加载周期。

使用方法

运行 Lighthouse 的方式有两种:作为 Chrome 扩展程序运行,或作为命令行工具运行。Chrome 扩展程序提供了用户友好的界面,方便读取报告。而命令行工具允许您将 Lighthouse 集成到持续集成系统。

开发者工具

你只需要打开 Chrome 的开发者工具,点击 Audits,然后就可以看到 Lighthouse 界面:

扩展程序

你可以到 chrome web store 下载並安装 Lighthouse Chrome 扩展程序。

命令行工具

需求:Node.js >= 5

  1. 全局安装 lighthouse
npm install -g lighthouse
  1. 然后输入你的页面
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…

实战部分

大部分你手动在浏览器里面做的事情,它都可以做到。例如:

  1. 截图並生成 PDF
  2. 自动填写表格,UI 测试,键盘输入
  3. 测试 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();
})();

页面数据

你只需要使用 page.metrics() 方法就可以了,它会返回一个页面数据对象。

代码覆盖率

你可以使用 page.coverage 里面的方法 startJSCoverage()startCSSCoverage() 来开始测试覆盖率。以及使用 stopJSCoverage(), stopCSSCoverage() 来结束测试。

拦截网络请求

你可以拦截图片的请求,甚至是把图片的请求换成其他请求,例如 http 直接上 https,或图片换成占位图。

生成报告

你可以通过代码生成 PDF,例如使用page.pdf() 方法。

github.com/GoogleChrom…

PPTRAAS

以上这些个案都是一些重复出现的日常例子。Puppeteer as a service ]就把以上这些代码做了封装,只需在 url 后续加入 url 参数,便可使用服务。

例如你可以使用 https://pptraas.com/screenshot?url=https://example.com/ 来截图。

更多例子可以到 Puppeteer as a service 来使用服务。

其他优质的工具

Node Debugger 可以让你打开浏览器里面的开发者工具来调试 Node 程序。

Page Speed Insights 可以让你透过谷歌的平台来测试里的网站,並生成报告。

后记

这次可谓干货满满,收获丰富。我之前以为这些工具过于专业,艰涩难懂,没想到只需要按几个按钮,写几行代码,甚至不需要写代码便可以测试自己的网站。

就让我好好地利用这些工具来优化我的个人博客吧(笑

参考资料

  1. Github - ebidel/lighthouse-ci
  2. Github - GoogleChrome/lighthouse
  3. Puppeteer as a service
  4. Tools for Web Developers - Lighthouse

阅读更多 Google 开发者大会 2018 技术干货