브라우저 그래픽 성능을 측정하는 방법

일마리 하이키넨

브라우저 그래픽 벤치마킹 간단히하기: 부드러운 프레임 속도를 유지하면서 최대한 많이 그려보기 프레임 속도가 떨어지면 프레임당 얼마나 그릴 수 있는지 알 수 있습니다. 게시물의 마지막입니다. 없으시다면 좋아요, 몇 가지 더 설명하겠습니다.

예시 시간! 다음은 벤치마킹 tick 함수가 포함된 작은 코드 스니펫입니다. tick 함수는 그리기가 지속적으로 33ms보다 오래 걸릴 때까지 그리기 로드가 증가하면서 draw 함수를 호출합니다.

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의 실제 예시를 참고하세요.

벤치마크가 속도가 느려지는 지점에 도달할 때까지 계속 더 많이 그리고 있는 것을 확인할 수 있습니다. 부드러운 프레임 속도로 얼마나 그릴 수 있는지 알아볼 수 있는 좋고 간단한 방법입니다. 자체 그리기 함수를 예제에 연결하고 맞춤 벤치마킹을 실행할 수도 있습니다.

브라우저 그래픽 벤치마킹 시 일반적인 주의사항 및 문제점

위의 예시가 좋은 방법이라면 어떤 방법이 좋지 않을까요? 관련 없는 항목을 벤치마킹하게 되거나 앱 실행 속도와 아무 관련이 없는 것으로 보이는 이상한 성능 측정항목을 제공하는 방식입니다. 문의해 주셔서 감사합니다. 다음은 제가 웹에서 본 가장 일반적인 두 가지 주제입니다.

최대 FPS 측정: 프레임마다 조금씩 그려 FPS를 측정합니다. 기본 그래픽 구현이 화면 재생 빈도에 동기화되므로 Chrome에서 그래픽 성능을 측정하는 데 제대로 작동하지 않습니다. 따라서 초당 최대 60회의 화면 업데이트를 받을 수 있습니다. 그리기 호출 속도를 측정하는 것은 Chrome의 그리기 시스템이 다음 화면 새로고침 시 실행되는 명령 버퍼에 그리기 명령을 넣기 때문에 그다지 유용하지 않습니다.

그래픽 성능을 측정하는 데 setTimeout을 사용하는 것은 좋지 않습니다. 브라우저에서 setTimeout 간격은 4ms로 제한되므로 가능한 최대 시간은 250FPS입니다. 지금까지 브라우저마다 최소 간격이 달랐기 때문에 브라우저 A는 250FPS (4ms 최소 간격)로 실행되고 브라우저 B는 100FPS (10ms 최소 간격)로 실행됨을 나타내는 매우 손상된 그리기 벤치마크가 발생했을 수 있습니다. 확실히 A가 더 빠릅니다! 아닙니다. B가 A보다 빠르게 그리기 코드를 실행했을 수도 있습니다. 예를 들어 A는 3밀리초, B는 1밀리초가 걸렸습니다. 그리기 시간은 최소 setTimeout 간격보다 짧으므로 FPS에 영향을 미치지 않습니다. 브라우저가 비동기식으로 렌더링되면 모든 선택이 중단됩니다. 잘 모르는 경우 setTimeout을 사용하지 마세요.

진행 방법

벤치마킹하는 더 좋은 방법은 사실적인 그리기 로드를 사용하고 프레임 속도가 느려질 때까지 곱하는 것입니다. 예를 들어, 타일맵 지형이 있는 하향식 게임을 작성 중인 경우, 프레임마다 타일맵을 그리고 60FPS로 실행되는지 확인해 봅니다. 사용할 경우 로드가 증가합니다 (타일맵을 프레임마다 두 번 그리고 중간에 명확하게 표시). FPS가 새로운 안정적인 수준으로 떨어질 때까지 계속 늘립니다. 이제 프레임당 몇 개의 타일맵 레이어를 그릴 수 있는지 알았습니다.

그래픽 애플리케이션마다 요구사항이 다르므로 이를 염두에 두고 벤치마크를 작성해야 합니다. 앱에서 사용 중인 그래픽 기능을 측정합니다. 느린 시나리오를 발견하면 이를 재현하는 가장 작은 코드로 줄여 보세요. 더 빨라야 하는 경우 new.crbug.com에서 버그 신고를 제출하세요.

고성능 웹 그래픽 코드를 작성하는 방법을 알아보려면 Chrome GPU팀의 Nat Duca와 Tom Wiltzius가 진행한 Google I/O 2012 대담을 확인해 보세요.