定位解决web开发中的性能问题

运行时性能是页面在运行时执行的方式，而不是加载。本教程将教您如何使用Chrome DevTools Performance面板分析运行时性能。就RAIL模型而言，您在本教程中学到的技能对于分析页面的响应，动画和空闲阶段非常有用

在本教程中，您将在实时页面上打开DevTools，并使用“性能”面板查找页面上的性能瓶颈

1. 以隐身模式打开Goog​​le Chrome 。隐身模式可确保Chrome以干净的状态运行。例如，如果安装了大量扩展，那么这些扩展可能会在性能测量中产生影响
2. 在“隐身”窗口中加载以下页面。这是您要分析的演示。该页面显示了一堆上下移动的小蓝方块 https://googlechrome.github.io/devtools-samples/jank/
3. 按Command+ Option+ I（Mac）或 Control+ Shift+ I（Windows，Linux）打开DevTools
   

找到瓶颈

打开chrome Performance 面板，单击“ 录制” 记录。DevTools在页面运行时捕获性能指标，等几秒钟