性能瓶颈分析与优化（写完代码后做）

改进站点的负载性能，都要从检查开始。检查有两项重要职能：它为您创建了一个基线，用于测量后续更改。它为您提供了可操作的提示，告诉您哪些更改将产生最大的影响。

在无痕浏览器里打开页面

设置

单击“审核”选项卡。它可能隐藏在“更多面板”“更多面板”按钮后面。这个面板上有一座灯塔，因为为审计面板供电的项目叫做灯塔。

将其设置成上图中的一样。

单击运行审核。10到30秒后，“审核”面板将显示站点性能的报告。

建立基线/没有优化前是什么分数

理解报告，lighthouse 里面的评分、推荐做法讲的很清楚，直接看就行。

检查页面加载性能

审计报告的Opportunities部分为您提供了有关如何提高页面性能的提示。实施报告里推荐的更改，在每次更改后审核站点，以测量其对站点速度的影响。

目标是使用性能面板来分析页面加载时主线程正在做什么工作，并找到延迟或删除不必要工作的方法。

单击性能选项卡。单击 Capture Settings 。将网络速度设置为slow 3G，CPU速度设置为6倍慢。移动设备通常比笔记本电脑或台式机有更多的硬件限制，因此这些设置可以让您体验页面加载，就像您使用的是功能较弱的设备一样。单击“重新加载”。DevTools重新加载页面，然后生成加载页面所需的所有操作的可视化。这种可视化将被称为跟踪。

分析加载性能，用右边的 reload；分析运行时性能，用左边的 record。

接下来的就是分析火焰图，和下面运行时性能里面的分析差不多。

“自我时间”列显示每个活动直接花费的时间。例如，图43显示大约57%的主线程时间花在了mineBitcoin函数上。

减少主线程的工作

做优化实验。每次只进行一项更改，并在每次更改后审核页面，以查看单独的更改如何影响性能。

提高加载性能

加载性能

用无痕模式打开

模拟低端机器：set CPU Throttling to 20x slowdown。

对于 cpu 密集型的移动端页面，模拟移动端 cpu

记录运行时性能

粗篮框圈起来的是 FPS 图表。当你看到FPS上方的红色条时，这意味着帧率下降得太低，可能会损害用户体验。通常，绿色条越高，FPS越高。

在FPS图表下方，您可以看到CPU图表。CPU图表与性能面板下方的汇总tab的颜色一致。事实上，CPU图表充满了色彩，这意味着CPU在录制过程中已经耗尽。每当你看到CPU长时间处于最大工作状态时，你就应该想办法减少工作量。

福利：打开 FPS 仪表

分析 frames per second（衡量动画性能的主要指标）

分析结果

请注意“摘要”选项卡。未选择任何事件时，此选项卡将显示活动的明细。在这个例子中页面的大部分时间用于渲染。由于性能是减少工作量的艺术，因此您的目标是减少用于渲染工作的时间。

展开 Main Section。DevTools显示主线程上随时间变化的活动的火焰图。x轴表示记录随时间的变化。每个条代表一个事件。更宽的横杆意味着这项活动需要更长的时间。y轴表示调用堆栈。当您看到事件堆叠在一起时，这意味着上层事件导致下层事件。

记录中有很多数据。通过单击、按住并将鼠标拖动到概述（包括FPS、CPU和网络图表）上，放大单个动画帧触发事件。“主要部分”和“摘要”选项卡将仅显示所选录制部分的信息。

注意：每当执行requestAnimationFrame（）回调时，就会发生 Animation Frame Fired 事件。

在这个例子中请注意 Animation Frame Fired 事件右上角的红色三角形。每当你看到一个红色的三角形，这是一个警告，可能有一个与此事件相关的问题。红色三角形代表超过 50ms 的长任务。

选择事件后，使用箭头键选择事件旁边的事件。

单击 Animation Frame Fired 事件。“摘要”选项卡现在显示有关该事件的信息。注意 reveal 链接。单击可使DevTools高亮显示启动 Animation Frame Fired 的事件。还请注意 app.js:94 链接。单击该按钮将跳转到源代码中的相关行。

在 app.update 事件下，有很多紫色事件。如果它们更宽，看起来好像每个上面都有一个红色三角形。现在单击其中一个紫色布局事件。DevTools在摘要选项卡中提供了有关事件的更多信息。事实上，有一个关于强制回流的警告（布局的另一个词）。

在摘要选项卡中，app.js:70 链接。DevTools将带您进入强制布局的代码行。

找出瓶颈

用性能面板去寻找性能瓶颈

运行时性能

performance 工具没查出来的时候，可考虑使用注释法排查导致页面慢/卡顿的地方。

性能瓶颈分析与优化（写完代码后做）