性能测评⼯具lighthouse的使⽤
1、⾕歌插件lighthouse的基本介绍
Lighthouse 是⼀个⽹站性能测评⼯具，它是 Google Chrome 推出的⼀个开源⾃动化⼯具，能够对 PWA 和⽹页多⽅⾯的效果指标进⾏评测，并给出最佳实践的建议以帮助开发者改进⽹站的质量。
它能够⽣成⼀个有关页⾯性能的报告，通过报告我们就可以知道需要采取哪些措施来改进应⽤的性能和体验。
1.1、什么是PWA
PWA，全称直译过来就是渐进式⽹页应⽤（ProgressiveWebApp）。它是⼀种⽹页应⽤，它可以离线使⽤，可以变成独⽴应⽤安装到系统中。它⾮常的轻量化，在多平台上⾯拥有⼀致的界⾯。
PWA 可以在浏览器上访问，也可以单独安装成⼀个应⽤在系统上。
在电脑端，最简单的就是使⽤Chrome浏览器。当Chrome检测到当前访问的⽹页⽀持PWA的时候，在地址栏的右端就会出现⼀个安装按钮，点击即可将这个PWA变成⼀个应⽤安装到浏览器中。⽽在Android上，使⽤Chrome浏览PWA站点时也会有相应的提⽰，添加到应⽤之后就会⾃动进⾏编译安装。iOS上⾯使⽤S
afari打开⽹站然后在菜单中选择添加到Home Screen就可以了，之后点开应⽤图标就会以独⽴应⽤形式出现，⽽不是通过Safari加载⽹页。
⼀些可⽤的 PWA 应⽤：微博 PWA（）和飞猪（）。有兴趣的打开看看，可以看到浏览器右上⾓有⼀个安装按钮，点击即可将该应⽤安装到系统中
参考：
有多种⽅法可以使⽤lighthouse来对我们的⽹站进⾏性能测评，在需要使⽤到 node 时，node 的版本会对 lighthouse 有影响，低版本的 node 将执⾏不了 lighthouse，node版本应该保持 8.9及以上版本（或更新）。
各使⽤⽅法如下：
2、使⽤Chrome插件lighthouse
（注意，插件的下载和报告的查看可能都需要墙后才能看）
可以在 Chrome 扩展商城⾥搜索 lighthouse ，或者通过以下地址来下载 lighthouse 添加⾄ Chrome浏览器中。
插件商城下载地址：
（上⾯地址应该需要墙才能访问，这⾥给⼤家分享⼀个⽹盘下载链接：链接：提取码：4ysn ）
插件安装成功后，点击浏览器的右上⽅可以看到灯塔的按钮标记。
先访问需要评估的⽹站，⽐如 www.baidu，然后点击灯塔按钮，选择 generate report 即可。lighthouse 会运⾏⼀系列的测试审查这个页⾯，然后它会把关于页⾯执⾏的⼀些性能指标以报告的形式展⽰给你。你可以参考这份报告中的⼀些指标提⽰来提升你的⽹站应⽤。Lighthouse 能够⽣成⼀份 JSON 或 HTML 报告，⽐如下图：
lighthouse 可以⽣成 HTML 和 json 格式的报告，HTML 可以直接打开，json 格式的报告可以通过这个地址来打开。
3、直接使⽤Chrome浏览器开发者⼯具（F12）⾃带功能
在⾼版本（应该是 >= 60）的 Chrome 浏览器中，Lighthouse 已经直接集成到了调试⼯具 DevTools 中了，因此不需要进⾏任何安装或下载。
按 F12 打开开发者⼯具，可以看到在 console、security 等选项后⾯有⼀个 Audits （安装了lighthouse插件或者是⾼版本的⾕歌浏览器可能显⽰的是 lighthouse）选项，选择该选项，然后点
击 generate report 即可。
4、使⽤npm包lighthouse
通过下载 npm 全局包 lighthouse，我们可以直接在命令⾏当中使⽤ lighthouse 来对⽹站进⾏性能测评。
⾸先，需要先安装 Node，需要 Node 8 LTS(8.9) 及以上版本。然后安装全局包 lighthouse：
npm install -g lighthouse
安装完成后我们就可以直接对某⼀个⽹站运⾏ lighthouse 命令了：
lighthouse www.baidu/
默认情况下，会在执⾏命令的当前⽬录下⽣成⼀个 HTML ⽂件，直接打开该⽂件即可查看报告
Lighthouse 命令提供了多个参数，通过参数的配置，能够更灵活地进⾏测评并输出报告结果。常⽤的参数有：
lighthouse <url> <options>
lighthouse --help  //输⼊ --help 选项可以查看可⽤的输⼊、输出选项
lighthouse www.baidu --view  //直接通过浏览器打开HTML报告
lighthouse www.baidu --output json  //结果以 json 格式⽂件输出
lighthouse www.baidu --output json --output-path ./myfile.json  //指定结果⽂件输出的⽬录
lighthouse baidu --output html --output-path ./report.html  //指定结果⽂件输出的⽬录
其他参数可参考 lighthouse的 github 官⽹：
5、直接克隆github上的lighthouse开源项⽬
我们可以通过直接克隆 github 上的 lighthouse 开源项⽬，然后通过开源项⽬来执⾏ lighthouse 命令。
先克隆项⽬，下载依赖：
git clone github/GoogleChrome/lighthouse    //克隆项⽬
cd lighthouse  //切换⾄项⽬根⽬录
npm install  //下载依赖
npm run build-all    //貌似这⼀步不执⾏也可以。这⼀步编译可能会有错，但不影响后⾯执⾏
然后执⾏ lighthouse 命令对⽹站进⾏测评：
node lighthouse-cli www.baidu
6、在node中以编程⽅式引⼊lighthouse模块
我们可以直接在我们的代码当中引⼊ lighthouse 模块，以编程开发的⽅式引⼊ lighthouse 功能。但需注意，lighthouse 是⼀个 node 节点模块，我们只能在服务器当中运⾏它（⽐如可以使⽤
nodejs），不能在类似于 vue 等项⽬当中引⽤它。
⽐如我们创建⼀个 nodejs 项⽬，先使⽤ npm init 初始化⼀个项⽬。然后安装 lighthouse 和 chrome-launcher 依赖，最后执⾏即可。chrome-launcher ⽤于调起浏览器。
⽐如创建了⼀个 lighthouseTEST ⽂件夹，先使⽤ npm 初始化该项⽬：
npm init  //在项⽬根⽬录下执⾏npm init，初始化项⽬
下载依赖：
npm install lighthouse chrome-launcher --save
创建⼀个 js ⽂件，⽐如 server.js：
const fs = require('fs');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');  //chrome-launcher ⽤于调起浏览器
(async () => {
const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});  //chromeLauncher ⼯具包提供了 launch ⽅法，接收⼀个启动所需的参数对象，这个参数⽤于配置 chrome 的启动环境  //lighthouse运⾏的⼀些配置信息
const options = {logLevel: 'info', output: 'html',  port: chrome.port};
//执⾏lighthouse得到执⾏结果，执⾏结果是⼀个JS对象
const runnerResult = await lighthouse('www.baidu', options);
//通过lighthouse的运⾏结果的report属性值拿到运⾏报告，运⾏报告是⽤于 HTML/JSON/CSV 输出结果的⼀个字符串
const reportHtml = port;
//⽣成结果⽂件
fs.writeFileSync('lhreport.html', reportHtml);
//关闭Chrome浏览器进程
})();
执⾏ server.js ⽂件：
node server.js
执⾏完 node server.js 命令后将会在当前⽬录下⽣成⼀份 HTML 报告⽂件，打开HTML⽂件即可查看报告。
项⽬⽬录结构如下：
参考：
6.1、代码及配置分析
const fs = require('fs');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
(async () => {
const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
//lighthouse运⾏的⼀些配置信息
const options = {logLevel: 'info', output: 'html',  port: chrome.port};
//执⾏lighthouse得到执⾏结果，执⾏结果是⼀个JS对象
const runnerResult = await lighthouse('www.baidu', options);
//通过lighthouse的运⾏结果的report属性拿到运⾏报告，运⾏报告是⼀个string
const reportHtml = port;
//⽣成结果⽂件
fs.writeFileSync('lhreport.html', reportHtml);
//关闭Chrome浏览器进程
await chrome.kill();
})();
默认的运⾏结果有五个指标（performance、accessiblity、best practices、seo、progressive web app）。
6.1.1、options配置对象
有时候可能我们只关注某⼀些指标，⽐如性能指标 performance，这时候我们可以给 options ⾥⾯添加属性 onlyCategories ，此时运⾏结果将只会包含 performance 指标：const options = {onlyCategories: ['performance']};
options ⾥⾯的 logLevel: 'info' 表⽰ lighthouse 运⾏过程中输出的⽇志级别，如果不想要运⾏过程中输出⽇志，将该属性去掉即可。
6.1.2、额外的config配置对象
另外，我们可以将额外的⼀个配置对象作为第三个参数传递给 lighthouse 函数，这个 config 参数能够帮助我们更细粒度地去控制整个测评。
⽐如可以将下⾯的 config 对象作为第三个参数传递给 lighthouse 函数，它在继承默认的配置的基础上进⾏了⼀定的⾃定义：
chrome直接下载
const config = {
extends: 'lighthouse:default',
audits: [
'autocomplete',
'large-javascript-libraries',
'script-treemap-data',
],
categories: {
// @ts-ignore: `title` is required in CategoryJson. setting to the same value as the default
// config is awkward - easier to omit the property here. Will defer to default config.
'performance': {
  auditRefs: [
  {id: 'large-javascript-libraries', weight: 0, group: 'diagnostics'},
  ],
},
// @ts-ignore: `title` is required in CategoryJson. setting to the same value as the default
// config is awkward - easier to omit the property here. Will defer to default config.
'best-practices': {
  auditRefs: [
  {id: 'autocomplete', weight: 0, group: 'best-practices-ux'},
    ],
},
},
};
使⽤额外的⾃定义配置，你可以限制审核的运⾏，在特殊条件下添加页⾯的其他负载，添加⾃⼰的⾃定义检查，调整评分等。
可以在通过命令⾏使⽤Lighthouse或⾃⼰使⽤ node 模块时指定⾃定义配置⽂件：
//下⾯是⾃定义配置⽂件 custom-config.js 的内容：
extends: 'lighthouse:default',
settings: {
'first-meaningful-paint',
'speed-index',
'first-cpu-idle',
'interactive',
],
},
};
在命令中使⽤：
lighthouse --config-path=path/to/custom-config.js example
在 node 模块中使⽤：
const lighthouse = require('lighthouse');
const config = require('./path/to/custom-config.js');
lighthouse('example/', {port: 9222}, config);
参考：
7、lighthouse 运⾏的⽣命周期
Lighthouse 运⾏测评的过程有⼀套完整的⽣命周期，可以划分成三个主要流程：
Collecting（收集数据）：⾸先是 Collecting 流程，这⼀步会调⽤内置的驱动程序（Driver），其作⽤是通过⾕歌开发⼯具协议（ Chrome DevTools Protocol）调起浏览器，并创建新的 tab 请求待测评的站点，通过浏览器采集站点数据并将结果（称之为 Artifacts）保存在本地临时⽬录。
Auditing（分析数据）：然后进⼊ Auditing 流程，读取 Artifacts 数据，根据内置的评判策略逐条进⾏检查并计算出各项的数字形式得分。
Report（⽣成报告）：最后进⾏ Report 流程，将评分结果按照 PWA、性能、⽆障碍访问、最佳实践等纬度进⾏划分，以 JSON、HTML 等格式输出。
如下图：
命令⾏⼯具基于此提供了⽣命周期的选项，我们可以让 CLI 只运⾏整个测评过程的⼀个或多个特定⽣命周期。⽐如，使⽤ --gather-mode（-G）只进⾏资源采集的⽣命周期，命令⾏⼯具将会启动浏览器，采集被测试站点的相关数据，并将结果以 json 的形式存储到本地，默认是 ./latest-run/ ⽬录，然后退出进程：
lighthouse example/ -G
如果想要跳过浏览器的交互，直接从本地读取页⾯的临时数据，运⾏测评和产出结果报告，则可以使⽤ --audit-mode（-A），默认将从 ./latest-run/ ⽬录读取：
lighthouse example/ -A
两个选项同时使⽤，就会运⾏整个测评的⽣命周期，与直接运⾏ lighthouse 命令相⽐，会在当前⽬录保存⼀份测试站点的数据。
lighthouse example -GA
如果不想使⽤默认的 ./latest-run/ ⽬录，我们也能⾃定义站点的 json 数据的保存⽬录，如：
lighthouse -GA=./mycustomfolder example
参考：
8、lighthouse报告的指标分析
使⽤ Lighthouse 对⽹站进⾏测评后，我们会得到⼀份评分报告，它包含了性能（Performance），访问⽆障碍（Accessibility），最佳实践（Best Practice），搜索引擎优化
（SEO），PWA（Progressive Web App）五个部分：
8.1、性能（Performance）
性能评分的分值区间是0到100，如果出现0分，通常是在运⾏ Lighthouse 时发⽣了错误，满分100分代表了⽹站已经达到了98分位值的数据，⽽50分则是75分位值的数据。
影响评分的性能指标：性能测试结果会分成 Metrics，Diagnostic，Opportunities 三部分，但只有 Metric
s 部分的指标项会对分数产⽣直接影响。
Lighthouse 会衡量以下 Metrics 性能指标项：
⾸次内容绘制（First Contentful Paint）。即浏览器⾸次将任意内容（如⽂字、图像、canvas 等）绘制到屏幕上的时间点。
⾸次有效绘制（First Meaningful Paint）。衡量了⽤户感知页⾯的主要内容（primary content）可见的时间。对于不同的站点，⾸要内容是不同的，例如：对于博客⽂章，标题及⾸屏⽂字是⾸要内容，⽽对于购物⽹站来说，图⽚也会变得很重要。
⾸次 CPU 空闲（First CPU Idle）。即页⾯⾸次能够对输⼊做出反应的时间点，其出现时机往往在⾸次有效绘制完成之后。该指标⽬前仍处于实验阶段。
可交互时间（Time to Interactive）。指的是所有的页⾯内容都已经成功加载，且能够快速地对⽤户的操作做出反应的时间点。该指标⽬前仍处于实验阶段。
速度指标（Speed Index）。衡量了⾸屏可见内容绘制在屏幕上的速度。在⾸次加载页⾯的过程中尽量展现更多的内容，往往能给⽤户带来更好的体验，所以速度指标的值约⼩越好。
输⼊延迟估值（Estimated Input Latency）。这个指标衡量了页⾯对⽤户输⼊⾏为的反应速度，其基准值应低于 50ms。
Metrics 部分的指标项会直接影响分数，可以作为我们的主要参考点。
另外的两部分中， Opportunities 指的是优化机会，它提供了详细的建议和⽂档，来解释低分的原因，帮助我们具体进⾏实现和改进。Diagnostics 指的是现在存在的问题，为进⼀步改善性能的实验和调整给出了指导。这两者不会纳⼊分数的计算。
8.1.1、性能评分标准
每⼀项性能指标对评分的贡献都有其计算逻辑，Lighthouse 会将原始的性能值映射成为 0-100 之间的数字。
例如，FMP（First Meaningful Paint）的原始值是从页⾯初始化开始到主要内容渲染成功的耗时，根据真实站点的数据，顶级性能的站点的 FMP 值约为 1220ms，这个值会被映射成Lighthouse 的 99 分。
针对不同的评分，Lighthouse ⽤了不同的颜⾊进⾏标注，分值区间和颜⾊的对应关系如下：
0 - 49（慢）：红⾊
50 - 89（平均值）：橙⾊
90 - 100（快）：绿⾊
各个指标对性能评分的贡献并不相同，权重较⼤的指标，对性能评分的影响更⼤⼀些。各指标权重分配情况可参考：
8.2、访问⽆障碍（Accessibility）
访问⽆障碍评分的分值由相关指标的加权平均值计算⽽来。可以在查阅每项指标的具体权重。同理，较⼤权重的指标项对分数的影响较⼤。
⽆障碍性的每个指标项测试结果为pass或者fail，与性能指标项的计算⽅式不同，当页⾯只是部分通过某项指标时，页⾯的这项指标将不会得分。例如，如果页⾯中的⼀些元素有屏幕阅读器友好的命名，⽽其他的元素没有，那么这个页⾯的 screenreader-friendly-names 指标项得分为0。
8.3、最佳实践（优化）（Best Practice）
最佳实践评分的分数区间为0-100。影响这项评分的指标项的权重都是相同的。
⽐如：推荐使⽤ https，跨域的跳转链接需要使⽤ rel 标识，不能使⽤废弃的 API等等。
8.4、搜索引擎优化（SEO）
⽐如：图⽚元素使⽤ alt 属性等等提⾼搜索引擎搜索排名，便于搜索引擎能到你这个⽹站。
8.5、PWA（Progressive Web App）