Как измерить время работы FPS и страниц в Firefox и/или Chrome?

Question

Я работаю над тестом производительности для холста HTML5 & Проекты SVG в формате HTML5. Поскольку проекты ориентированы на графику и требуют плавной работы, в качестве показателей я выбрал частоту обновления (fps) и время рисования страницы (мс). Мне известно, что значения, рассчитанные из кода javascript, недостаточно репрезентативны, поэтому эти значения следует брать из самих браузеров. Поэтому javascript-библиотеки, такие как Mrdoob's stats.js, действительно не могут быть использованы (исправьте меня, если я ошибаюсь). Любая информация будет оценена по достоинству.

То, что я нашел до сих пор:

Mozilla Firefox:

• FPS: windows.mozPaintCount
• страницу Время Paint:

Google Chrome:

• FPS: встроенный FPS-метр (кажется, работает только для DOM-элементов)
• страница времени Paint: встроенный РРТ-метр (также для DOM)

Answer 1

Возможно, вы можете использовать window.performance.now(). Этот новый API был предназначен для таких вещей, где вам понадобится суб-мс раз.

Он (намерен) дать вам в высоком разрешении отметку времени в более высоком разрешении, чем мс, но не без недостатков:

• Chrome в настоящее время возвращает миллисекунды, нет усиления там (может быть исправлено в Canary сейчас)
• Разрешение зависит от базовой системы

и mozPaintCount является запатентованным вызов, который работает только в Firefox.

Так что независимо от того, как вы крутите и включаете это, вы получите только до сих пор.

Но вы можете попробовать что-то вроде этого:

function startPaintOperation() { 

    var startTime = 0, endTime = 0; 

    startTime = performance.now() || new Date().getTime(); // with fallback 

    ... paint 

    endTime = performance.now() || new Date().getTime(); 

    return endTime - startTime; 
} 

Я не думаю, что вы можете получить гораздо ближе, чем это без использования встроенных инструментов браузера.

Для получения более подробной информации см. specifications here.

Надеюсь, это поможет.

Answer 2

Вы можете использовать requestAnimationFrame:

(function() { 
    var active = false; 
    var frames = 0; 
    var start; 

    var frame = function() { 
    frames = frames + 1; 
    if (active) { 
     window.requestAnimationFrame(frame); 
    } 
    }; 

    window.FPS = { 
    start: function() { 
     active = true; 
     frames = 0; 
     start = window.performance.now(); 
     frame(); 
    }, 

    end: function() { 
     active = false; 
     var seconds = (window.performance.now() - start)/1000; 
     var fps = Math.round(frames/seconds); 
     alert(fps); 
    } 
    }; 
}());