前言欲善其事，必先利其器。了解了性能指标后，性能优化的目标就已经明确了。接下来，我们将使用一些性能测量工具来明确网站离优化目标还有多远。我将用3篇文章介绍3款主流的测量工具：ChromeDevToolsPerformance主要用于日常开发中分析运行时性能Performance。Lighthouse用于生成网页的性能评估报告。WebPageTest用于网站整体质量评估和一站式性能评估。有了这三个工具，我们就可以从多个维度对网站性能进行综合评估。性能测量工具-LighthouseLighthouse是谷歌开发的一个开源工具，它提供了一套全面的测试来评估网页质量，包括加载性能、可访问性、最佳实践和PWA。在chrome60之后的版本中，Lighthouse已经内置到DevTool中。Lighthouse的目标是“DoBetterWeb”，旨在帮助Web开发人员改进他们现有的Web应用程序。通过运行一套测试，开发人员可以发现新的Web平台API，了解性能缺陷，并学习（新的）最佳实践。换句话说，让开发人员更好地进行Web开发。一、使用方法1.1使用命令行工具NodeCLI进行测试1、命令行工具允许开发者将Lighthouse集成到持续集成系统中。2.安装Lighthouse作为全局节点模块npminstall-glighthouse运行Lighthouse一个页面Reviewlighthousehttps://www.taobao.com3.最后在命令行会输出一个html页面，打开页面我们可以查看评估报告默认情况下，命令行生成的报告页面会从Performance、Accessibility、BestPractices、SEO、PWAsupport等几个方面生成一份评估报告。如果我们想设置类别，只进行性能类别测试，可以在命令后加上--only-categories=performance。另外，lighthouse命令提供了很多选项，需要注意以下几点：--chrome-flags：用于传入chrome命令行参数，chrome命令行参数是为了Chrome实现实验功能，方便调试，制作的特殊功能通过扩展选项提供了超过一千个参数。单击此处查看完整列表。在服务器上部署和运行chrome时，其中一些参数很有用。--disable-storage-reset：运行前不清除浏览器缓存和其他存储API，可用于测试二次访问性能--disable-device-emulation：Lighthouse会使用Nexus5X模拟器来测试pagebydefault，你可以使用这个选项来禁用它，尤其是在测试PC端页面时--disable-network-throttling:Lighthouse会默认模拟使用快速的3G网络速度。使用此参数禁用网络速度模拟1.2。我们也将它作为一个节点模块来使用，你可以将Lighthouse作为一个节点模块，在你自己的项目中调用。代码如下：constlighthouse=require('lighthouse');constchromeLauncher=require('chrome-launcher');functionlaunchChromeAndRunLighthouse(url,opts,config=null){/1.使用chromelauncher打开一个chrome窗口returnchromeLauncher.launch({chromeFlags:opts.chromeFlags}).then(chrome=>{opts.port=chrome.port;//2.在同一个端口上运行lighthousereturnlighthouse(url,opts,config).then(results=>chrome.kill().then(()=>results));});}constopts={chromeFlags:['--show-paint-rects']};//用法:launchChromeAndRunLighthouse('https://example.com',opts).then(results=>{//Useresults!});1.3在ChromeDevTools中使用1.按Command+Opiton+I(Mac)或Control+shift+I(Windows,Linux)打开Devtools2。点击LightHouse面板（旧版Chrome浏览器为Audits面板），即可可以看到如下界面3.在Device中选择测试模拟的设备，在Category中选择性能评估的类别。比如我们测试淘宝首页，选择测试PC的网页性能。4、点击Generatereport按钮，我们可以直接在控制台生成PerformanceEvaluationReport1.4通过ChromeStoreInstallURL安装扩展：https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk点击生成报告按钮针对当前打开的页面运行Lighthouse测试浏览器扩展与devTools面板的区别LightHouse扩展主要用于测试国外网站，因为国内很多网站没有国际CDN，测出来的结果往往不准确，而devTools中的LightHouse面板是在本地网络环境下测试的。比如我用本地的devToolslightHouse访问抖音的官网，评价分数是81分，而扩展程序的评价结果??降低了1倍，只有40分左右，因为CDN资源请求太长。当然，如果你做国外网站的性能测评，就不用考虑这个问题了。2.评估报告分析2.1整体质量评估整体质量评估主要有五个方面：性能（Performance）、可访问性（Accessibility）、网络最佳实践（BestPractices）、搜索引擎优化（SEO）渐进式应用PWA（ProgressiveWebApps）)其中，PWA是Chrome一直在推动的渐进式Web应用开发，旨在增强Web能力，缩小与原生应用的差距，打造类似的用户体验。主要包括四个模块，这里简单介绍一下，如下图：2.2性能评价性能评价主要包括6大指标：首次内容绘制时间（FCP，FirstContentfulPaint）：用于记录文本的首次绘制、图片、非空白Canvas或SVG的时间。LargestContentfulPaint（LCP，LargestContentfulPaint）：用于记录视口中最大元素的绘制时间，这个时间会随着页面渲染的变化而变化，因为页面中最大的元素在渲染过程中可能会发生变化，另外,指标在第一次用户交互后停止记录。速度指数（SpeedIndex）：指网页显示内容的速度，标准时间为4s。阻塞交互时间（TBT，TotalBlockingTime）：用户体验指标，代表页面何时真正进入可用状态。毕竟，仅仅足够快地渲染内容是不够的，还要能够快速响应用户交互。交互时间（TTI，TimetoInteractive）：该指标不是指最早交互的时间，而是交互流畅的时间。具体值是FMP后，5秒后没有执行长任务（超过50ms）Task）时间累积布局偏移（CLS，CumulativeLayoutShift）：记录页面上非预期的位移波动。2.3优化建议评估后，LightHouse会给出一些优化建议，如图：我们可以看到两个红色的建议：LCP元素缩短LCP时间（窗口中最大可见图片或文本块的渲染时间）。避免多个页面重定向：避免多个页面重定向，这会在加载页面之前引入额外的延迟。三、测试流程及核心模块LightHouse测试过程中，命令面板会输出测试日志，截图如下：通过Lighthouse测试过程中的日志输出，可以得到Lighthouse的测试流程图drawn：Lighthouse与浏览器建立连接。测试的初始配置和要测试的页面的加载。在页面加载期间，运行一系列收集器，每个收集器收集自己的目标信息并生成工件。运行一系列的审计项（Audits），每个审计项都会从中间产品（artifacts）中获取需要的数据，计算出自己的分数。根据审计项目得分，计算大类得分，汇总生成报表。在初步了解了基本的测试流程之后，我们来看一下Lighthouse官方的架构图：下面简单介绍一下这几个模块：驱动模块：驱动负责与浏览器的双向通信，记录事件日志，和模拟器设置等待。Gatherer模块：Gatherer模块将通过此配置来定义页面的加载方式，并运行所有已配置的Gatherer，以在页面加载过程中收集信息并生成中间产品工件。有了工件，就可以进入审计模块的下一步了。Audits模块：audit模块，和gatherers类似，也在配置文件中定义了需要运行的audits，每个audits也有对应的同名实现文件。运行配置文件中定义的所有审计项后，会得到每个审计项的评分和详情，然后进入报表模块。报表模块：在报表模块的配置文件中，定义了每个测试类别需要的审计项和每个审计项的权重。在最后的聚合阶段，Lighthouse会根据配置文件和上一个环节计算的每个审计项的分数计算性能分数。并根据每个审计项的得分和类型，将审计项分为通过和未通过，对于未通过的审计项将给出详细的测试细节和优化指南。最后，Lighthouse可以用作集成的性能测试工具。为我们提供一份标准的性能报告，我们可以在使用过程中将其融入到CD过程中，作为一种测试，确保我们的在线功能在大多数环境下都有出色的表现。
