frame per second - FPS每当我们在 FPS 上方看到红色条时,就意味着帧速率下降得太低,当 FPS 降到 60 以下时,会严重影响用户体验。 一般来说,绿色条越高,FPS 越高。 在 FPS 图表下方,可以看到 CPU 图表。 CPU 图表中的颜色对应于“性能”面板底部“摘要”选项卡中的颜色。 如果 CPU 图表充满各种颜色,意味着 CPU 在录制过程中已达到极限。 每当您看到 CPU 长时间用尽时,这就是寻找减少工作量的方法的提示。因为只有无色才代表 CPU 处于 Idle 状态。 将鼠标悬停在 FPS、CPU 或 NET 图表上。 DevTools 会及时显示该页面的屏幕截图。 左右移动鼠标以进行重播。 这称为 展开 Main 三角符号。 DevTools 向我们显示主线程上活动随时间变化的火焰图。 x 轴表示随时间推移的记录。 每个条代表一个事件。 条形越宽意味着该事件花费的时间越长。 y 轴表示调用堆栈。 当您看到事件堆叠在一起时,这意味着上层触发了下层事件。 下面这行代码导致了 force layout 的发生。 这段代码的问题在于,在每个动画帧中,它会更改每个方块的样式,然后查询每个方块在页面上的位置。 因为样式改变了,浏览器不知道每个方块的位置是否改变了,所以它必须重新布局方块来计算它的位置。 什么是 Web 应用开发中的 forced reflows?在 Web 应用开发中,Forced Reflow 是指由于对文档元素进行了计算尺寸、布局或渲染等操作,导致浏览器强制重新计算文档的布局和渲染流程的过程。 Forced Reflow 是 Web 应用性能瓶颈之一,因为它会影响页面的渲染速度和用户交互体验。浏览器通常需要进行大量计算和绘制才能完成 Forced Reflow,这可能会导致页面卡顿、滚动不流畅、动画效果不佳等问题。 为了减少 Forced Reflow 的影响,可以采取以下措施:
通过以上措施可以有效减少 Forced Reflow 的次数,提高页面性能和用户体验。 |
|