性能测量工具-DevTools/PageSpeed/LightHouse

前端的性能优化有诸多有迹可循的理论和方法，比如 Yahoo！性能军规（Best Practices for Speeding Up Your Web Site）、Google PageSpeed Insights Rules（https://developers.google.com/speed/docs/insights/rules）。万变不离其宗，诸如此类的性能优化准则都可以对应到 Browser Processing Model 的不同阶段。

具体可以查看《前端性能监控：window.performance 属性分析》

显然，这些指标绝大部分都属于非视觉指标（Non-Visual Metrics），是体验优化的常规指标，更是体验和性能优化中逃不开的关键因素，但却并非感官指标，也并不能完全衡量出用户的感官性能（Perceptual Performance）。

所谓感官性能，即用户直观感知到的性能，用户感受是一种非常主观的判断，那么如何衡量和统计感知性能？通常我们针对用户感知会通过用研分析的方式（眼动仪、用户沟通、用户反馈、调研问卷、专家评估）来评估和衡量。但感官性能不同于用户感受，是否有方式可以量化和衡量呢？笔者经过一些调研和了解后，发现感官性能是可以通过一定方式进行衡量、分析和对标的，因为对性能的感受更多反映在视觉的变化上，因此我们可以通过一些视觉指标来衡量感官性能：

First Paint Time/First Non-Blank Paint：首次渲染的时间
First Contentful Paint Time：文档中内容元素首次渲染时间
First Meaningful Paint Time ：代表首次有意义的渲染时间
First Interactive Time：首次可交互时间
Consistently Interactive Time：持续可交互时间
Fisrt Visual Change：首次视觉发生变化的时间点
Last Visual Change：最后一次视觉发生变化的时间点
Speed Index：视觉速度—— Mean Pixel-Histogram Difference
Perceptual Speed Index ：视觉速度—— Structural Similarity Image Metric 算法，统计结果更贴近用户的真实感受

性能优化分析工具

提及性能优化分析工具，在开发阶段我们拥有众多的选择（比如 Chrome 自带的 Dev Tools、老牌的 YSlow、以及 Google 推出的 PageSpeed Insights），这里笔者强烈推荐的是 Lighthouse。

PageSpeed Insights 也在 2018 年的某次改版中將 Lighthouse 評分整併到 PageSpeed Insights 中！

而兩者相較之下， PageSpeed Insights 整併後主要是增加了較多視覺報表呈現的部分，並且可以選擇語系來看分析後的優化方案；而 Lighthouse 則有多個管道可以查看檢測後的結果。

介紹這三個工具的用法與差異：

Google DevTools
Google Extensions Lighthouse
Web.dev

Google DevTools

在Google Chrome 浏览器中有着非常好用的DevTools，而在Chrome 60 版本后， DevTools 新增了一项面板Audits 便是基于Lighthouse 所制作出来的。我们只要打开DevTools 在面板Audits 执行Run audits 即可开始测分。

采用这个方法的好处是可以针对于一些未实际架在server 上的网页做检测，例如想在测试机上调校SEO，或是以local 端方式开启的网站也能用这个方法评分。

Web.dev

Web.dev 也是由 Google 基于 Lighthouse 所开发，与 PageSpeed Insights、Lighthouse 基本上是差不多的，不一样的地方在於它的測評是依據衝擊度（Impact）來排名，可以較直覺從比較重要的項目開始優化。另外則是下載報表時會稍微方便一點。

What's Lighthouse

Lighthouse是Google开发的一款开源工具，提供一套全面的测试来评估网页质量，包括加载性能、可访问性、最佳实践和PWA。

官方介绍：https://developers.google.com/web/tools/lighthouse

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.

You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

在chrome 60之后的版本，DevTool里已经内置了Lighthouse。

开源库：https://github.com/GoogleChrome/lighthouse 是这么介绍自己的：

Lighthouse analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.

Lighthouse的目标是“Do Better Web”，旨在帮助Web开发者改进他们现有的Web应用程序。通过运行一整套的测试，开发者可以发现新的 Web 平台 API，意识到性能的隐患，并学习（新的）最佳实践。换句话说，就是让开发者在 Web 开发上做得更好。

lightthouse架构图

https://github.com/GoogleChrome/lighthouse/blob/master/docs/architecture.md（推荐打开看看）

lighthouse的源码结构

——

├─assets

├─build

├─clients // 浏览器中的展示逻辑

│ └─extension // 扩展

├─docs // 文档

├─lighthouse-cli // 命令行工具

│ ├─commands // 命令

│ └─test

├─lighthouse-core // 核心逻辑

│ ├─audits

│ ├─computed

│ │ └─metrics

│ ├─config

│ ├─gather

│ │ ├─connections

│ │ └─gatherers

│ ├─lib // 工具库

│ ├─report // 报告生成器

│ │ └─html

│ │ └─renderer

│ └─test // 测试用例

├─lighthouse-logger // 日志收集

├─lighthouse-viewer // 报告渲染工具

└─types // 类型文件

Lighthouse 整体调用关系

Lighthouse-core internal module dependencies

其实我觉得官方文档已近很好了，看着文档使用完全不似问题。

这里没有必要多讲。但是要去看这个的原理，目前暂时没有这个功夫去深入了解……

参考文章：

【性能优化】性能测量工具-LightHouse https://zhuanlan.zhihu.com/p/370520996

前端感官性能的衡量和优化实践 https://zhuanlan.zhihu.com/p/29677049

网路优化不可不知的测评工具Lighthouse, PageSpeed Insights & Web.dev https://shawnlin0201.github.io/Optimization/Optimization-001-lighthouse/

转载本站文章《性能测量工具-DevTools/PageSpeed/LightHouse》,
请注明出处：https://www.zhoulujun.cn/html/webfront/engineer/Performance/8662.html