前端性能优化系列 | 什么是性能优化？（下）

1）控制面板

控制面板中有五个选择项和两个下拉框，它们的含义如下：

• Screenshots：表示是否截取每一帧的屏幕截图，默认会勾选，并且在概览面板中展示随时间变化的截屏动画，如果取消勾选，则不会这哪是这部分内容；
• Memory：表示是否记录内存消耗，默认不会候选，如果勾选则会在线层面板与统计面板之间展示出各种类型资源的内存消耗曲线；
• Web Vitals：是谷歌针对网页加载速度和体验所提出的一套指标，这套指标用于测试网页的加载速度及用户体验等，这里不做详细说明；
• Disable javaScript samples：如果需要模拟手机端的运行环境时则需要勾选，它表示关闭JavaScript样本，减少在手机端运行时的开销；
• Enable advanced paint instrucmentation（slow）：表示是否开启加速渲染工具，用来记录渲染事件的相关细节，该功能比较消耗性能，开启后重新生成检测报告的速度会变慢。
• Network：在性能检测时，用以切换模拟网络环境，可以模拟弱网(2g/3g)条件下网站的一些表现情况，然后根据弱网的具体表现进行相关优化。；
• CPU：限制CPU的处理速度，主要用于模拟低俗CPU运行时的性能。

2）概览面板

在概览面板中，可以选择一个起始时间点，然后拖动鼠标左键来滑动选择面板中国的局部范围，来进行更小范围的性能观察。这部分的性能信息主要包括以下三个指标：

• FPS：衡量动画是否流畅的重要指标。当绿色柱状图较高时，就代表FPS帧率很高，体验也就越流畅，如果FPS帧率较低，就会是红色的横条，表明帧率较低，影响用户体验，这里图中并没有出现红色，说明网页的整个体验还是非常流畅的。这里特别说明一下不管是游戏还是网页，都是帧率越高，体验越好。
• CPU：展示CPU的使用情况。这个指标和下面的Sumarry指标是一一对应，而且这里它们的颜色所代表含义也是相同的，每个颜色代表各个过程所耗费的时间。从图中可以看到，整个加载过程中，白色部分(ldle)占比是最大的，这里代表的是空闲性能，第二大占比的橙色对应的是脚本加载时间，所以要想更快可以试着从加快脚本加载速度方面去优化。
• NET：展示各个请求所花费的具体时间，这里看不太清，可以直接去 Network 面板当中去具体观察各个请求所花费的时间，然后针对具体的请求具体分析。

3）线程面板

线程面板就是主线程执行过程中的火焰图，主线程在解析HTML和CSS、页面绘制及执行JavaScript的过程中，每个事件调用栈和耗时情况都会反应在这个图中。其中每一个长条都代表一个事件，将鼠标悬浮至其上面时，就可以查看到相应的时间的执行耗时与事件名。

在面板下方，可以看到非常重要的一个指标：Main，它代表主线程，如下图：

图中不同颜色表示不同的事件类型。横轴代表时间，纵轴代表具体的调用堆栈。调用堆栈就像是浏览器当中的解释器，可以利用它追踪函数的执行流。当浏览器中调用了多个函数，通过这种机制可以追踪到哪个函数正在执行，具体函数体中又调用了哪个函数。

常见的事件类型有：

• HTML解析；
• JavaScript事件；
• 页面布局更改；
• 元素样式重新计算；
• 页面涂层的绘制。

4）统计面板

统计面板会根据在概念面板中选择时间区域的不同，绘制出不同类型任务执行耗时的可视化图标，这里点击线程面板中的一个矩形，如下图：

点击之后看到这个事件下对应的一些具体信息，这里还可以点击Range右侧链接，点击之后会直接跳到sources面板对应的代码位置，这个功能方便了定位代码：

统计面板中包含四个Tab，其含义如下：

• Summary：展示各类任务事件耗时环形图；
• Bottom-Up：查看各个事件耗时的排序列表，列表包含两个维度：去除子事件后该事件本身的耗时和包含子事件从开始到结束的总耗时；
• Call Tree：查看全部或指定火焰图中某个事件的调用栈；
• Event Log：查看关于每个事件详细的日志。

（3）LightHouse

Lighthouse是一款用于改进网站应用质量的开源自动化检测工具。只要为 Lighthouse 提供一个需要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告，其内容包括：性能检测、可访问性检测、SEO检测、是否符合PWA的检测、其他是否符合最佳实践的检测。 检测报告不仅涉及上面这些方面的现状分析，同时还提供了一些优化指导建议，方便开发者快速发现潜在的性能瓶颈并实施优化改进。

LightHouse的优点：

• 评分报告全面且具有一定的权威性;
  
• 提供解决方案;
  
• 发现大的性能问题。

LightHouse的缺点：

• 测试环境较单一，用户群体的环境各有不同；
• 存在波动，不同时刻的访客群体存在差异，数据只能反应当前时刻的效果。

Lighthouse的使用方式有三种：Chrome扩展程序、Chrome开发者工具面板、Node.js命令行。

这里主要介绍其在Chrome控制面板中的使用。在新版的Chrome浏览器中，将LightHouse集成在了开发者工具中，打开控制台，切换到LightHouse面板，如图所示：

1）检测得分

点击中间的Generate report按钮就可以开始自动分析，LightHouse就会自动帮我们生成性能优化报告，如下图：

可以看到报告详细给出了各种情况下的分数情况，从左到右分别是Performance(页面性能)、Accessibility(可访性)、Best Practise(最佳实践)、SEO(搜索引擎优化)、Progressive Web App(渐进式应用)。点击其中的每一项都可以看到给出的具体优化建议。

2）页面性能

对于这个测试结果，有六个性能指标，如图所示：

性能评估主要包含6个指标：

1. 首次有内容绘制时间（FCP，First Contentful Paint）：用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。
2. 最大内容绘制时间（LCP，Largest Contentful Paint）：用于记录视窗内最大的元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变，另外该指标会在用户第一次交互后停止记录。
3. 速度指数（Speed Index）: 指的是网页以多快的速度展示内容，标准时间是4s。
4. 阻塞交互时间（TBT, Total Blocking Time）：用户体验指标，代表着页面何时真正进入可用的状态。毕竟光内容渲染的快也不够，还要能迅速响应用户的交互。
5. 用户可交互时间（TTI, Time to Interactive）：这个指标并不是指的最早的可交互时间，而是可流畅交互的时间，具体的值为FMP之后，5秒后没有long task执行（50ms以上的任务）的时间
6. 累计布局偏移（CLS, Cumulative Layout Shift）：记录了页面上非预期的位移波动。

评估之后，LightHouse会给出一些优化建议，如图所示：

可以看到共给出了四条优化建议，分别是移除未使用的js文件、消除阻塞渲染的资源、移除未使用用的CSS文件、预连接到所要请求的源。点开每一条建议，就可以看到详细的操作说明。

3）可访问性

这部分关于网站可访问性的审核项，在网站优化中可参考进行改善，但并非一定要遵从，如下图所示：

在上面的结果中，提出了一些可访问性方面的问题，我们可以根据这些问题进行修改，比如：

• 按钮没有可访问的名称，依赖屏幕阅读器的用户就无法使用它；
• 图片中没有使用alt属性，当图片资源请求失败时，如果有alt属性，就可以让用户知道该图片的信息。

4）最佳实践

这部分内容的审核属于网站开发的最佳实践，建议开发者尽量遵从，最佳实践的审核项如图所示：

从上图中，可以看到对最佳实践的建议：

• 跨域链接是不安全的，在外部链接中增加rel="noopener" 或者 rel="noreferrer"来改善性能和防范安全漏洞；
• 图片纵横比不正确的图像，它告诉我们图像显示尺寸应符合自然纵横比；

5）搜索引擎优化

对于这部分内容，如果符合审核项的要求，将会大大提高网站被搜索引擎搜索到的概率。优化建议如图所示：

从上图中，可以看到两个问题：

• 如果搜索引擎没有对页面进行爬网的权限，则无法将您的页面包含在搜索结果中，这里设置了反爬；
• 图片标签没有设置alt属性，希望能够添加，增加图片被索引的概率。

根据每部分给出的评测结果以及优化建议，开发者就可以针对性的对网站页面进行优化。