如何評估瀏覽器圖像效能

Ilmari Heikkinen

為瀏覽器圖形設定基準化:盡可能多繪製,同時維持流暢的影格速率。影格速率下降後,就知道每個影格可繪製多少數量。文章結尾。沒有?好的,我會進一步說明。

範例時間!以下小程式碼片段含有利用基準測試 tick 函式。tick 函式會呼叫帶有增加繪製負載的 draw 函式,直到繪圖作業持續超過 33 毫秒為止。

var t, previousTime;
var drawLoad = 1;
var slowCount = 0;
var maxSlow = 10;
// Note, you might need to polyfill performance.now and requestAnimationFrame
t = previousTime = performance.now();
var tick = function() {
    var maximumFrameTime = 1000/30; // 30 FPS
    t = performance.now();
    var elapsed = t - previousTime;
    previousTime = t;
    if (elapsed < maximumFrameTime || slowCount < maxSlow) {
        if (elapsed < maximumFrameTime) {
            drawLoad+=10;
        } else {
            slowCount++;
        }
        draw(drawLoad);
        requestAnimationFrame(tick);
    } else {
        // found maximum sustainable load at 30 FPS
        document.getElementById('res').innerHTML = ("could draw "+(drawLoad)+" in " +
            maximumFrameTime + " ms");
    }
};
requestAnimationFrame(tick);

請參閱 jsFiddle 實際範例

您可以查看基準測試如何不斷繪製更多內容,直到到達速度變慢的時間點為止。這個方法簡單又簡單,會告訴你能透過流暢的影格速率畫出多少圖像。您也可以把自己的繪圖函式加進範例,然後進行自訂基準測試,好極了!

設定瀏覽器圖形基準化的常見注意事項和陷阱

那麼,如果上述範例最實用,有什麼效果會不太好?導致您為不相關的指標進行基準測試,或是不會產生異常的成效指標,而這和應用程式的執行速度似乎無關緊要。不好意思,以下是我在網路上最常看到的兩組資料。

測量最高每秒影格數:在每個影格中繪製一點點,並測量每秒影格數。但基準圖像實作會同步處理至螢幕刷新率,因此不適用於評估 Chrome 的圖形效能 (因此每秒最多可進行 60 次畫面更新)。Chrome 的繪圖系統會將繪圖指令放入指令緩衝區,然後在下一個畫面重新整理時執行,因此測量繪製呼叫速度並不會非常實用。

使用 setTimeout 來評估圖像效能也是不好的做法。setTimeout 間隔時間最多為瀏覽器 4 毫秒,因此您可以善用 250 FPS。過去,瀏覽器的間隔下限不同,所以您可能有非常差的複雜繪圖基準,其中顯示瀏覽器 A 以 250 FPS (4 毫秒下限) 執行,以及瀏覽器 B 以 100 FPS (10 毫秒的時間間隔) 執行。就是 A 速度更快!不是!可能是因為 B 執行繪圖程式碼的速度比 A 更快,例如 A 耗時 3 毫秒,B 花了 1 毫秒。由於繪製時間短於 setTimeout 間隔下限,因此不會影響 FPS。如果瀏覽器是以非同步方式顯示,則所有憑證都會關閉。除非您瞭解實際操作,否則請勿使用 setTimeout。

後續做法

更好的基準測試方法是使用實際的繪圖負載,然後相乘,直到畫面更新率開始傾斜為止。舉例來說,如果您要編寫含有圖塊地圖地形的由上而下遊戲,請嘗試針對每個影格繪製圖塊地圖,看看是否執行每秒 60 個影格。如果選擇「是」,請增加負載 (每個影格兩次繪製圖塊地圖,而且在兩個影格之間都很清楚)。繼續增加,直到 FPS 降至新的穩定等級為止。現在您已經瞭解每個頁框可以繪製多少圖塊地圖圖層。

不同的圖形應用程式有不同的需求,因此您在編寫基準測試時應留意這一點。評估您在應用程式中使用的圖形功能。發現緩慢的情境時,請盡量減少產生重現該程式碼的最小程式碼 (若速度較慢,請前往 new.crbug.com 提交錯誤報告)。

如要瞭解如何編寫高效能的網路圖形程式碼,請觀看 Chrome GPU 團隊的 Nat Duca 及 Tom Wiltzius 於 Google I/O 大會演講。