kibana页面一直在加载_前端页面性能及其分析工具

本文结合谷歌官方工具 Lighthouse，分析了最新的前端页面性能评分标准，帮助大家更好地理解各项性能指标，以提升并优化相关的前端项目。

一、前端页面性能及其分析工具

前端页面的性能，一直都是大家持续关注的一个领域，因为用户的留存率和页面加载性能息息相关。根据google做出的数据统计，页面访问时长从1s增加到3s，用户跳出率增加32%。

对于前端页面性能的评估，一般是两种形式：一种是使用性能分析工具，在线对网页各项指标进行打分评估；一种是使用性能监控，通过 performance api 或者自定义的埋点上报用户网络真实的访问情况，然后进行统计分析。

虽然通过统计用户的数据更加真实，但是为了对页面性能能够有一个统一的量化标准，我们往往选择使用标准的打分工具对页面的性能进行评估。

性能分析初期，我们会从 chrome 的开发者工具对网页进行分析，包括查看 load 和 DOMContentLoaded 等事件触发的时间。后来又有了一系列的性能分析工具，例如 webpage analyzer、WebPageTest、Yslow等。

现在由于google官方已经将他们自己开发的 Lighthouse 嵌入到开发者工具的选项卡中，因此我们就把 Lighthouse 当做是标准评估工具。

Lighthouse 是一款开源的web页面性能分析工具，并且会给出页面最佳实践的一些相关建议。除了可以直接在 chrome DevTools 中使用外，也支持使用浏览器插件(chrome和Firefox)或者npm包(node api或者CLI)。

像google的网页 measure以及 PageSpeed Insight工具都是调用的 Lighthouse 对页面进行分析。

二、如何为页面的性能打分

1. Lighthouse 的迭代与性能指标变化

Lighthouse 第一个开源的版本可以追溯到2016年，目前(2020年10月)最新的版本是6.4.1，已经迭代89个版本。而在这几年中 Lighthouse 对于性能指标的选取也一直在更新。

google在最新的6.X版本中，相比于5.X版本，更新了三个新的性能指标：去掉了 FMP(First Meaningful Paint)、FCI(First CPU Idle) 和 mpFID(Max Potential First Input Delay)；

加入了 TBT(Total Blocking Time)、LCP(Largest Contentful Paint) 和 CLS(Cumulative Layout Shift)。后文会针对这些指标进行详细的讲解。

之前5.X版本的Lighthouse

现在的Lighthouse(6.X版本)

2.  如何计算页面性能分数

如下图所示，在页面性能部分，Lighthouse 会综合目前的6个关键指标的表现情况，计算出页面的性能分数。

以最新的6.X计算方法来看，每个性能指标的数值会对应一个该指标的分数。例如上图中的FCP、SI、LCP、TTI、TBT、CLS等数值，对应的单项分数就依次为78、62、37、5、99、92分。一般来说数值越小该指标分数越高。