framepersecond-FPS每当我们在FPS上方看到红色条时，就表示帧率降得太低了。当FPS低于60时，将严重影响用户体验。一般来说，绿色条越高，FPS越高。在FPS图下方，您可以看到CPU图。CPU图表中的颜色对应于性能面板底部的摘要选项卡中的颜色。如果CPU图形充满各种颜色，则表示CPU在录制过程中已达到极限。每当您看到CPU长时间处于耗尽状态时，这就是寻找减少工作量的方法的提示。因为只有没有颜色表示CPU处于Idle状态。将鼠标悬停在FPS、CPU或NET图上。DevTools会及时显示页面的截图。左右移动鼠标重播。这称为擦洗，对于手动分析动画进度很有用。展开主三角形符号。DevTools向我们展示了主线程上活动随时间变化的火焰图。x轴表示随时间变化的记录。每个条代表一个事件。更宽的条表示事件花费的时间更长。y轴表示调用堆栈。当您看到事件堆叠在一起时，这意味着上层触发了下层事件。以下代码行导致强制布局发生。此代码的问题在于，在每个动画帧上，它都会更改每个方块的样式，然后查询每个方块在页面上的位置。因为样式变了，浏览器不知道每个方块的位置有没有变，所以要重新布局方块来计算它的位置。什么是Web应用程序开发中的强制回流？在Web应用开发中，ForcedReflow是指由于对文档元素的计算大小、布局或渲染等操作，强制浏览器重新计算文档的布局和渲染过程。ForcedReflow是Web应用程序的性能瓶颈之一，因为它会影响页面渲染速度和用户交互体验。浏览器通常需要做大量的计算和绘制才能完成ForcedReflow，这可能会导致页面卡顿、滚动不流畅、动画效果不佳等问题。为了降低ForcedReflow的影响，可以采取以下措施：减少DOM操作：DOM操作是触发ForcedReflow的主要原因之一。因此，尽量减少DOM操作，例如缓存元素、使用事件委托等。避免频繁修改样式：修改元素的样式也可能导致ForcedReflow。因此，尽量减少对元素样式的修改，例如将多个样式属性组合成一个CSS类，使用CSS3动画代替JavaScript动画等。避免强制同步布局：在获取元素的大小或位置等属性时，浏览器需要进行计算和布局操作。如果频繁获取这些属性，可能会造成ForcedReflow。因此，尽量避免使用强制同步布局的属性和方法，例如offsetTop、getComputedStyle()等。使用批操作：将多个操作合并为一个批操作，例如使用DocumentFragment、requestAnimationFrame()等。以上措施可以有效减少ForcedReflow次数，提升页面性能和用户体验。
