一工具简介

Lighthouse是Google开源的一个自动化工具，它可以搜集多个Web网页性能指标，分析Web应用的性能并生成报告，为开发人员进行性能优化提供了参考方向。

1工作原理

•Driver（驱动）—— 通过 Chrome Debugging Protocol 和 Chrome 进行交互。

•Gatherer（采集器）—— 决定在页面加载过程中采集哪些信息，将采集的信息输出为 Artifact。可自定义。

•Audit（审查器）—— 将 Gatherer 采集的 Artifact 作为输入，审查器会对其测试，然后得出相应的测评结果。可自定义。

•Reporte（报告）—— 将审查的结果通过指定的方式报告出来

1.1工具安装

1.1.1安装路径:更多工具-扩展程序-Chrome应用商城-添加至Chrome。

1.2.工具使用方法

1.2.1访问需要评估的网站。例如https://www.baidu.com

1.2.2开发者工具打开Lighthouse工具

1.2.3点击’分析网页加载情况‘按钮，开始性能分析

1.2.4分析过程显示进度条

1.3.报告生成

工具分析完毕后，能够生成一份HTML报告，点击链接可直接打开报告，进行网页性能分析。

二性能报告分析

2.测试报告概述

报告包含了Performance，访问无障碍（Accessibility），最佳实践（Best Practice），搜索引擎优化（SEO），PWA（Progressive Web App）五个部分。



2.1报告分析

主要参考了报告中的Performance模块的报告数据，Performance性能测试结果会分成 Metrics，Diagnostic，Opportunities 三部分。

2.1.1Metrics模块的部分指标项会影响报告分数，是开发人员进行性能优化的主要参考点，需要关注红色得分的指标。

点击learn more,可以学习各指标释义。



为方便大家更好地理解指标及指标释义，整理如下：





Opportunities模块主要罗列详细的性能优化建议及对应的文档，来解释低分的原因，帮助研测同学定位需要改进的点。截图建议支持展开，展示的文档罗列的是具体可优化的点，研发可结合业务实际有针对性进行性能优化。

：



展开：



Diagnostics模块指的是现在存在的问题，为进一步改善性能的实验和调整给出了指导。

Diagnostics模块从各个维度给出了具体的、有针对性的建议，分别是：最小化主线程工作，减少javascript执行时间，避免巨大的网络负载等。截图建议支持展开，展示的文档罗列的是具体可优化的点，研发可结合业务实际有针对性进行性能优化。

总：