# frame per second - FPS

每當我們在 FPS 上方看到紅色條時，就意味著幀速率下降得太低，當 FPS 降到 60 以下時，會嚴重影響使用者體驗。 一般來說，綠色條越高，FPS 越高。

![](https://img-blog.csdnimg.cn/img_convert/695210ca7ca74bd175834a8c0ae89fe3.png)

![](https://img-blog.csdnimg.cn/img_convert/2a46c4fdbc3da10520e8eac09bc5c4c8.png)

在 FPS 圖表下方，可以看到 CPU 圖表。 CPU 圖表中的顏色對應於“效能”皮膚底部“摘要”選項卡中的顏色。 如果 CPU 圖表充滿各種顏色，意味著 CPU 在錄製過程中已達到極限。 每當您看到 CPU 長時間用盡時，這就是尋找減少工作量的方法的提示。因為只有無色才代表 CPU 處於 Idle 狀態。

![](https://img-blog.csdnimg.cn/img_convert/bfc3dea54016baafb25d29ae209151e9.png)

將滑鼠懸停在 FPS、CPU 或 NET 圖表上。 DevTools 會及時顯示該頁面的螢幕截圖。 左右移動滑鼠以進行重播。 這稱為 `scrubbing`，它對於手動分析動畫的程式很有用。

![](https://img-blog.csdnimg.cn/img_convert/1a0fba94943ae93df1e2d9198646ecad.png)

展開 Main 三角符號。 DevTools 向我們顯示主執行緒上活動隨時間變化的火焰圖。 x 軸表示隨時間推移的記錄。 每個條代表一個事件。 條形越寬意味著該事件花費的時間越長。 y 軸表示呼叫堆疊。 當您看到事件堆疊在一起時，這意味著上層觸發了下層事件。

![](https://img-blog.csdnimg.cn/img_convert/7de54df3d4ce9a9440ea9d6340045415.png)

下面這行程式碼導致了 force layout 的發生。

![](https://img-blog.csdnimg.cn/img_convert/d14b8295c48d6de13094ebf1edd57ade.png)

這段程式碼的問題在於，在每個動畫幀中，它會更改每個方塊的樣式，然後查詢每個方塊在頁面上的位置。 因為樣式改變了，瀏覽器不知道每個方塊的位置是否改變了，所以它必須重新佈局方塊來計算它的位置。

# 什麼是 Web 應用開發中的 forced reflows？

在 Web 應用開發中，Forced Reflow 是指由於對檔案元素進行了計算尺寸、佈局或渲染等操作，導致瀏覽器強制重新計算檔案的佈局和渲染流程的過程。

Forced Reflow 是 Web 應用效能瓶頸之一，因為它會影響頁面的渲染速度和使用者互動體驗。瀏覽器通常需要進行大量計算和繪製才能完成 Forced Reflow，這可能會導致頁面卡頓、滾動不流暢、動畫效果不佳等問題。

為了減少 Forced Reflow 的影響，可以採取以下措施：

1. 減少 DOM 操作：DOM 操作是觸發 Forced Reflow 的主要原因之一。因此，儘可能減少 DOM 操作，例如快取元素、使用事件委託等。

2. 避免頻繁修改樣式：修改元素的樣式也可能導致 Forced Reflow。因此，儘可能減少對元素樣式的修改，例如將多個樣式屬性合併為一個 CSS 類，使用 CSS3 動畫代替 JavaScript 動畫等。

3. 避免強制同步佈局：在獲取元素的尺寸或位置等屬性時，瀏覽器需要進行計算和佈局操作。如果頻繁獲取這些屬性，可能會導致 Forced Reflow。因此，儘可能避免使用會強制同步佈局的屬性和方法，例如 offsetTop、getComputedStyle() 等。

4. 使用批次操作：將多個操作合併為一個批次操作，例如使用 DocumentFragment、requestAnimationFrame() 等。

透過以上措施可以有效減少 Forced Reflow 的次數，提高頁面效能和使用者體驗。

Chrome 開發者工具 Performances 皮膚裡的引數解讀

相關文章