frame per second - FPS
每当咱们在 FPS 上方看到红色条时，就意味着帧速率降落得太低，当 FPS 降到 60 以下时，会重大影响用户体验。 一般来说，绿色条越高，FPS 越高。
在 FPS 图表下方，能够看到 CPU 图表。 CPU 图表中的色彩对应于“性能”面板底部“摘要”选项卡中的色彩。 如果 CPU 图表充斥各种色彩，意味着 CPU 在录制过程中已达到极限。 每当您看到 CPU 长时间用尽时，这就是寻找缩小工作量的办法的提醒。因为只有无色才代表 CPU 处于 Idle 状态。
将鼠标悬停在 FPS、CPU 或 NET 图表上。 DevTools 会及时显示该页面的屏幕截图。 左右挪动鼠标以进行重播。 这称为 scrubbing，它对于手动剖析动画的过程很有用。
开展 Main 三角符号。 DevTools 向咱们显示主线程上流动随工夫变动的火焰图。 x 轴示意随时间推移的记录。 每个条代表一个事件。 条形越宽意味着该事件破费的工夫越长。 y 轴示意调用堆栈。 当您看到事件重叠在一起时，这意味着下层触发了上层事件。
上面这行代码导致了 force layout 的产生。
这段代码的问题在于，在每个动画帧中，它会更改每个方块的款式，而后查问每个方块在页面上的地位。 因为款式扭转了，浏览器不晓得每个方块的地位是否扭转了，所以它必须从新布局方块来计算它的地位。
什么是 Web 利用开发中的 forced reflows？
在 Web 利用开发中，Forced Reflow 是指因为对文档元素进行了计算尺寸、布局或渲染等操作，导致浏览器强制从新计算文档的布局和渲染流程的过程。
Forced Reflow 是 Web 利用性能瓶颈之一，因为它会影响页面的渲染速度和用户交互体验。浏览器通常须要进行大量计算和绘制能力实现 Forced Reflow，这可能会导致页面卡顿、滚动不晦涩、动画成果不佳等问题。
为了缩小 Forced Reflow 的影响，能够采取以下措施：
- 缩小 DOM 操作：DOM 操作是触发 Forced Reflow 的次要起因之一。因而，尽可能减少 DOM 操作，例如缓存元素、应用事件委托等。
- 防止频繁批改款式：批改元素的款式也可能导致 Forced Reflow。因而，尽可能减少对元素款式的批改，例如将多个款式属性合并为一个 CSS 类，应用 CSS3 动画代替 JavaScript 动画等。
- 防止强制同步布局：在获取元素的尺寸或地位等属性时，浏览器须要进行计算和布局操作。如果频繁获取这些属性，可能会导致 Forced Reflow。因而，尽可能防止应用会强制同步布局的属性和办法，例如 offsetTop、getComputedStyle() 等。
- 应用批量操作：将多个操作合并为一个批量操作，例如应用 DocumentFragment、requestAnimationFrame() 等。
通过以上措施能够无效缩小 Forced Reflow 的次数，进步页面性能和用户体验。