性能瓶颈分析与优化（写完代码后做）
2021-12-31 11:26:17 0 举报AI智能生成
性能瓶颈分析与优化
作者其他创作
大纲/内容
加载性能
提高加载性能
检查页面加载性能
改进站点的负载性能，都要从检查开始。
检查有两项重要职能：
检查有两项重要职能：
- 它为您创建了一个基线，用于测量后续更改。
- 它为您提供了可操作的提示，告诉您哪些更改将产生最大的影响。
设置
在无痕浏览器里打开页面
建立基线/没有优化前是什么分数
单击“审核”选项卡。
它可能隐藏在“更多面板”“更多面板”按钮后面。
这个面板上有一座灯塔，因为为审计面板供电的项目叫做灯塔。
它可能隐藏在“更多面板”“更多面板”按钮后面。
这个面板上有一座灯塔，因为为审计面板供电的项目叫做灯塔。
将其设置成上图中的一样。
单击运行审核。
10到30秒后，“审核”面板将显示站点性能的报告。
10到30秒后，“审核”面板将显示站点性能的报告。
理解报告，lighthouse 里面的评分、推荐做法讲的很清楚，直接看就行。
做优化实验。
每次只进行一项更改，
并在每次更改后审核页面，
以查看单独的更改如何影响性能。
每次只进行一项更改，
并在每次更改后审核页面，
以查看单独的更改如何影响性能。
审计报告的Opportunities部分为您提供了有关如何提高页面性能的提示。
实施报告里推荐的更改，在每次更改后审核站点，以测量其对站点速度的影响。
实施报告里推荐的更改，在每次更改后审核站点，以测量其对站点速度的影响。
减少主线程的工作
目标是使用性能面板来分析页面加载时主线程正在做什么工作，
并找到延迟或删除不必要工作的方法。
并找到延迟或删除不必要工作的方法。
- 单击性能选项卡。
- 单击 Capture Settings 。
- 将网络速度设置为slow 3G，CPU速度设置为6倍慢。移动设备通常比笔记本电脑或台式机有更多的硬件限制，因此这些设置可以让您体验页面加载，就像您使用的是功能较弱的设备一样。
- 单击“重新加载”。DevTools重新加载页面，然后生成加载页面所需的所有操作的可视化。这种可视化将被称为跟踪。
分析加载性能，用右边的 reload；
分析运行时性能，用左边的 record。
分析运行时性能，用左边的 record。
接下来的就是分析火焰图，和下面运行时性能里面的分析差不多。
“自我时间”列显示每个活动直接花费的时间。例如，图43显示大约57%的主线程时间花在了mineBitcoin函数上。
运行时性能
用性能面板去寻找性能瓶颈
用无痕模式打开
对于 cpu 密集型的移动端页面，
模拟移动端 cpu
模拟移动端 cpu
模拟低端机器：set CPU Throttling to 20x slowdown。
记录运行时性能
分析结果
分析 frames per second
（衡量动画性能的主要指标）
（衡量动画性能的主要指标）
粗篮框圈起来的是 FPS 图表。
当你看到FPS上方的红色条时，这意味着帧率下降得太低，可能会损害用户体验。
通常，绿色条越高，FPS越高。
当你看到FPS上方的红色条时，这意味着帧率下降得太低，可能会损害用户体验。
通常，绿色条越高，FPS越高。
在FPS图表下方，您可以看到CPU图表。
CPU图表与性能面板下方的汇总tab的颜色一致。
事实上，CPU图表充满了色彩，这意味着CPU在录制过程中已经耗尽。
每当你看到CPU长时间处于最大工作状态时，你就应该想办法减少工作量。
CPU图表与性能面板下方的汇总tab的颜色一致。
事实上，CPU图表充满了色彩，这意味着CPU在录制过程中已经耗尽。
每当你看到CPU长时间处于最大工作状态时，你就应该想办法减少工作量。
福利：打开 FPS 仪表
找出瓶颈
请注意“摘要”选项卡。
未选择任何事件时，此选项卡将显示活动的明细。
在这个例子中页面的大部分时间用于渲染。
由于性能是减少工作量的艺术，因此您的目标是减少用于渲染工作的时间。
未选择任何事件时，此选项卡将显示活动的明细。
在这个例子中页面的大部分时间用于渲染。
由于性能是减少工作量的艺术，因此您的目标是减少用于渲染工作的时间。
展开 Main Section。
DevTools显示主线程上随时间变化的活动的火焰图。
x轴表示记录随时间的变化。
每个条代表一个事件。
更宽的横杆意味着这项活动需要更长的时间。
y轴表示调用堆栈。
当您看到事件堆叠在一起时，这意味着上层事件导致下层事件。
DevTools显示主线程上随时间变化的活动的火焰图。
x轴表示记录随时间的变化。
每个条代表一个事件。
更宽的横杆意味着这项活动需要更长的时间。
y轴表示调用堆栈。
当您看到事件堆叠在一起时，这意味着上层事件导致下层事件。
记录中有很多数据。
通过单击、按住并将鼠标拖动到概述（包括FPS、CPU和网络图表）上，放大单个动画帧触发事件。
“主要部分”和“摘要”选项卡将仅显示所选录制部分的信息。
通过单击、按住并将鼠标拖动到概述（包括FPS、CPU和网络图表）上，放大单个动画帧触发事件。
“主要部分”和“摘要”选项卡将仅显示所选录制部分的信息。
在这个例子中请注意 Animation Frame Fired 事件右上角的红色三角形。
每当你看到一个红色的三角形，这是一个警告，可能有一个与此事件相关的问题。
红色三角形代表超过 50ms 的长任务。
每当你看到一个红色的三角形，这是一个警告，可能有一个与此事件相关的问题。
红色三角形代表超过 50ms 的长任务。
注意：每当执行requestAnimationFrame（）回调时，就会发生 Animation Frame Fired 事件。
单击 Animation Frame Fired 事件。
“摘要”选项卡现在显示有关该事件的信息。
注意 reveal 链接。单击可使DevTools高亮显示启动 Animation Frame Fired 的事件。
还请注意 app.js:94 链接。单击该按钮将跳转到源代码中的相关行。
“摘要”选项卡现在显示有关该事件的信息。
注意 reveal 链接。单击可使DevTools高亮显示启动 Animation Frame Fired 的事件。
还请注意 app.js:94 链接。单击该按钮将跳转到源代码中的相关行。
选择事件后，使用箭头键选择事件旁边的事件。
在 app.update 事件下，有很多紫色事件。
如果它们更宽，看起来好像每个上面都有一个红色三角形。
现在单击其中一个紫色布局事件。DevTools在摘要选项卡中提供了有关事件的更多信息。
事实上，有一个关于强制回流的警告（布局的另一个词）。
如果它们更宽，看起来好像每个上面都有一个红色三角形。
现在单击其中一个紫色布局事件。DevTools在摘要选项卡中提供了有关事件的更多信息。
事实上，有一个关于强制回流的警告（布局的另一个词）。
在摘要选项卡中，app.js:70 链接。
DevTools将带您进入强制布局的代码行。
DevTools将带您进入强制布局的代码行。
performance 工具没查出来的时候，
可考虑使用注释法排查导致页面慢/卡顿的地方。
可考虑使用注释法排查导致页面慢/卡顿的地方。
职业：本科
0 条评论
下一页
