前端页面性能检测工具-Lighthouse安装及使用

最近在做开发的过程中，需要对前端界面进行性能检测和优化，使用的是lighthouse。

Lighthouse 是Google开源的一个自动化工具，用于改进网络应用的质量，适用于网页版和移动端，比如找出哪些资源适合延迟加载，以及可以在初始页面加载中节省多少流量。能生成一个包括页面性能、PWA（Progressive web apps，渐进式 Web 应用）、可访问性（无障碍）、最佳实践、SEO的报告清单提供参考。

一、lighthouse的安装

Lighthouse是Chrome提供的一个扩展工具，可以通过Chrome应用商店进行下载安装。安装成功后可以在右上角的扩展程序管理中看到。

 

2、Lighthouse的使用方法

在开始前，我们需要注意一下：lighthouse只能检测以Http/Https开头的网页，无法检测本地网页，这点需要注意。看下面截图中圈出来的红色部分。

（1）当我们在界面中切换到检查模式后，可在窗口最右侧看到Lighthouse的目录，在这里可以点击图中的“Generate Report”生成检测报告。

（2）生成过程可能会持续30秒左右，请耐心等待。生成过程中，会弹出一个等待框，上面有生成进度条。

（3）生成完成后，就可以在这个窗口看到检测结果了

点击某一个具体项，可以看到下面具体的一些性能指标，点击右侧的切换，可以看到中英文的说明和翻译。

接下来一篇专门写性能指标分析。