对于 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>
找出瓶颈
<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>
