跳至主要内容

[web] 瀏覽器轉譯與效能檢測（Browser rendering and Performance Analyze）

keywords: render, paint, fps, performance, devtool, chrome, browser​

目錄​

[TOC]

重要觀念​

Frames Per Second (FPS)​

時下大多數裝置會以 每秒 60 次 的頻率更新螢幕。因此，每個畫面（frame）可使用的更新時間只有大約 16ms (1 秒 / 60 = 16.66ms)。 在現實中，瀏覽器還有其他例行任務需要執行，因此您的所有工作必須在 10ms 內完成，否則畫面率就會下降，而螢幕上的內容會顫動（judders）。 這通常稱為 閃避（jank），這會負面影響使用者體驗。

像素管道（Pixel Pipeline）​

在轉譯的過程中，下圖中任何一個部分的改變都有可能引起閃避，因此需要清楚知道你的程式碼影響到的是下圖中的哪一個部分：

Imgur

改變版面配置（Layout）將觸發重繪和合成​

當你改變了元素的 width, height, position 的 left 或 top 位置時，會改變到 layout 屬性，此時瀏覽器需要重新計算每一個元素的位置，每一個被影響到的區域都需要被重繪（repainted），接著繪製完成的元素需要再被合成（composite）。

只改變繪製（Paint）​

如果你單純只改變 paint 屬性，像是 background-image, text-color, shadows 時，此時並不會影響到整個 layout ，這時候瀏覽器會跳過 layout ，只會執行繪製（paint）。

只改變合成（Composite）​

如果您變更一個不需要版面配置或繪製的屬性，那麼瀏覽器會直接跳去執行合成。

工具​

如果想要各個 CSS 屬性會觸發哪些階段，可以參考 css-triggers。

效能檢測​

測試網站 @ Google DevTools Sample

分析 FPS​

可以先看 FPS 的圖表，簡單來說，綠色的線越高有著越高的 FPS，使用者不會出現卡頓的現象；但綠色線太低時，你會看到紅線條時，表示畫面更新率太低，這將導致使用者體驗差。

Imgur

分析 CPU​

接著可以看 CPU 的圖表，在這個圖表中的顏色可以對應到底下的 Summary 頁籤，事實上，CPU 的圖表如果充滿了顏色，表示在錄製的期間已經用盡了全力，每當你看到 CPU 用盡全力好一段時間時，就該好好找些方式讓它可以少做一些事。

Imgur

顯示轉譯監控面板（Show Rendering Panel）​

在 chrome dev tool 中按下 Command + Shift + P ，輸入 show frames per second(FPS) meter ，會跳出轉譯的監測面板：

Imgur

總結頁籤（Summary Tab）​

透過 Summary 頁籤，可以看出大部分 Rendering 階段花了大部分的時間：

Imgur

透過 Main Section 找出問題所在​

透過展開 Main Section，x 軸表示的是時間，每一條 bar 表示的是一個事件，當這個 bar 越長時，表示這個事件花費的時間越長；y 軸表示的是 call stack，當許多事件疊在一起時，越上面的事件會促發下面的事件。

以下面的程式碼和圖片為例，表示 click 事件促發了一個函式執行，這個函式名為 grow，grow 函式裡面做的事情是使用 join() 這個函式。

var x = [];

function grow() {
  x.push(new Array(1000000).join('x'));
}

document.getElementById('grow').addEventListener('click', grow);

Imgur

特別留意紅色的三角形（Note the red triangle）​

特別留意 Main Section 中右上角的三角型，當你看到它時，表示這個事件可能有些問題需要處理：

Imgur

在橘色的 Animation Frame Fired 事件底下有很多的紫色片段，點進去之後可以在 Summary Tab 看到更多的細節，並且提示 Forced reflow is a likely performance bottleneck：

Imgur

在 Summary Tab 的 Call Stacks 中可以點擊 reveal 或者是有問題的程式碼部分（app.update @ app.js:70）：

Imgur

頁面會跳到程式碼部分，並寫提示問題所在：

注意：這裡程式碼的問題是，在每一次動畫影格中，都會改變每一個方形的樣式（style），並且查詢頁面上每一個方形的位置（position），因為樣式改變了，所以瀏覽器並不知道每一個方形的位置是否已經變了，因此它必須要重新排版（re-layout）方形來計算它們的位置。進一步可參考 避免大型且複雜的版面配置與版面輾轉。

Imgur

參考​