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