Tarayıcı grafiklerinin performansını ölçme

Ilmari Heikkinen

Tarayıcı grafiklerinin karşılaştırmasını kısaca özetlemek gerekirse: Sorunsuz bir kare hızını korurken mümkün olduğunca fazla çizim yapın. Kare hızınız düştüğünde, kare başına ne kadar çizebileceğinizi bilirsiniz. Yayın sonu. Cevabınız hayır mı? Tamam, daha ayrıntılı olarak açıklayacağım.

Örnek zaman! Aşağıda, karşılaştırma tick işlevi içeren küçük bir kod snippet'i verilmiştir. tick işlevi, çizim 33 ms'den daha uzun süren bir noktaya gelene kadar artan bir çizim yüküyle bir draw işlevi çağırır.

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'daki canlı örneği inceleyin

Karşılaştırmanın, yavaşladığı noktaya ulaşana kadar nasıl daha fazla ve daha fazla çizmeye devam ettiğini görebilirsiniz. Bu, pürüzsüz bir kare hızında ne kadar çizebileceğinizi belirlemenin güzel ve basit bir yoludur. Örneğe kendi çizim işlevinizi de ekleyebilir ve özel karşılaştırmalar yapabilirsiniz.

Tarayıcı grafiklerini karşılaştırırken dikkat edilmesi gereken noktalar ve sık karşılaşılan sorunlar

Yukarıdaki örnek iyi bir yöntemse kötü yöntemler neler? Alakasız şeyleri karşılaştırmanıza yol açan veya uygulamanızın ne kadar hızlı çalıştığıyla hiçbir ilgisi olmayan garip performans metrikleri sunan yöntemler. Sorduğunuz için memnun oldum. Web'de en sık gördüğüm iki sorunu aşağıda bulabilirsiniz.

Maksimum FPS'yi ölçme: Her karede biraz çizin ve FPS'yi ölçün. Temel grafik uygulaması ekran yenileme hızıyla senkronize edildiği için Chrome'da grafik performansını ölçmek için iyi çalışmaz (saniyede en fazla 60 ekran güncellemesi alırsınız). Chrome'un çizim sistemi, çizim komutlarınızı bir sonraki ekran yenilemesinde çalıştırılacak bir komut arabelleğine yerleştirdiği için çizim çağrısı hızını ölçmek de çok yararlı olmaz.

Grafik performansını ölçmek için setTimeout kullanmak da kötü bir fikirdir. setTimeout aralığı tarayıcılarda 4 ms ile sınırlıdır. Bu nedenle, bu işlevden en fazla 250 FPS elde edebilirsiniz. Geçmişte tarayıcıların farklı minimum aralıkları vardı. Bu nedenle, A tarayıcısının 250 FPS (minimum 4 ms aralığı) ve B tarayıcısının 100 FPS (minimum 10 ms aralığı) hızında çalıştığını gösteren çok bozuk bir önemsiz çizim karşılaştırması yapmış olabilirsiniz. Açıkça A daha hızlı. Hayır. B, çizim kodunu A'dan daha hızlı çalıştırmış olabilir. Örneğin, A 3 ms, B ise 1 ms sürdü. Çizim süresi minimum setTimeout aralığından kısa olduğu için FPS'yi etkilemez. Tarayıcı eşzamansız olarak oluşturma yapıyorsa tüm bahisler geçersizdir. Ne yaptığınızı bilmiyorsanız setTimeout'u kullanmayın.

Bu durumda ne yapmalısınız?

Karşılaştırma yapmak için daha iyi bir yöntem, gerçekçi bir çizim yükü kullanmak ve kare hızı düşmeye başlayana kadar bu yükü çarpmaktır. Örneğin, karo haritası arazisi olan bir yukarıdan aşağıya oyun yazıyorsanız karo haritasını her karede çizmeyi deneyin ve 60 FPS'de çalışıp çalışmadığını kontrol edin. Cevabınız evetse yükü artırın (her karede iki kez karo haritası çizin ve aralarında temizleme yapın). FPS yeni ve kararlı bir seviyeye düşene kadar artırmaya devam edin. Artık çerçeve başına kaç katman karo haritası çizebileceğinizi biliyorsunuz.

Farklı grafik uygulamalarının farklı ihtiyaçları vardır. Bu nedenle, karşılaştırmalarınızı bu durumu göz önünde bulundurarak yazmalısınız. Uygulamanızda kullandığınız grafik özelliklerini ölçün. Yavaş bir senaryo tespit ettiğinizde, bu senaryoyu yeniden üreten en küçük kod parçasına indirgemeyi deneyin (ve daha hızlı olması gerekiyorsa new.crbug.com adresinden hata raporu gönderin).

Yüksek performanslı web grafik kodunu nasıl yazacağınızı öğrenmek için Chrome GPU Ekibi'nden Nat Duca ve Tom Wiltzius'un Google I/O 2012 konuşmasına göz atın.