브라우저 그래픽 벤치마킹을 요약하면 다음과 같습니다. 원활한 프레임 속도를 유지하면서 최대한 많이 그립니다. 프레임 속도가 떨어지면 프레임당 그릴 수 있는 양을 알 수 있습니다. 게시물 끝입니다. 없으시다면 알겠습니다. 좀 더 설명해 드리겠습니다.
시간 예시 다음은 벤치마킹 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에서 실시간 예시를 참고하세요.
벤치마크가 속도가 느려질 때까지 점점 더 많이 그리는 모습을 확인할 수 있습니다. 이 방법은 부드러운 프레임 속도로 그릴 수 있는 양을 간단하게 파악하는 좋은 방법입니다. 예에 자체 draw 함수를 플러그인하고 맞춤 벤치마킹을 실행할 수도 있습니다.
브라우저 그래픽을 벤치마킹할 때의 일반적인 주의점 및 함정
위의 예가 좋은 방법이라면 좋지 않은 방법은 무엇일까요? 관련 없는 항목을 벤치마킹하거나 앱 실행 속도와 관련이 없는 것처럼 보이는 이상한 성능 측정항목을 제공하는 방법 문의해 주셔서 감사합니다. 다음은 웹에서 가장 자주 접하게 되는 두 가지 문제입니다.
최대 FPS 측정: 프레임마다 약간씩 그리고 FPS를 측정합니다. 기본 그래픽 구현이 화면 재생 빈도에 동기화되므로 Chrome에서 그래픽 성능을 측정하는 데는 적합하지 않습니다 (초당 최대 60회의 화면 업데이트가 발생함). Chrome의 그리기 시스템은 그리기 명령어를 다음 화면 새로고침 시 실행되는 명령어 버퍼에 넣으므로 그리기 호출 속도를 측정하는 것도 큰 도움이 되지 않습니다.
그래픽 성능을 측정하는 데 setTimeout을 사용하는 것도 좋지 않습니다. 브라우저에서 setTimeout 간격은 4ms로 제한되므로 최대 250FPS까지만 사용할 수 있습니다. 이전에는 브라우저마다 최소 간격이 다르므로 브라우저 A가 250FPS (최소 간격 4ms)로 실행되고 브라우저 B가 100FPS (최소 간격 10ms)로 실행되는 매우 잘못된 사소한 그리기 벤치마크가 있었을 수 있습니다. 분명히 A가 더 빠릅니다. 아니요. B가 A보다 빠르게 그리기 코드를 실행했을 수 있습니다. 예를 들어 A는 3ms가 걸렸고 B는 1ms가 걸렸습니다. 그리기 시간이 최소 setTimeout 간격보다 짧으므로 FPS에 영향을 미치지 않습니다. 브라우저가 비동기식으로 렌더링되는 경우 모든 내기가 무효화됩니다. 자신이 무엇을 하고 있는지 확실하지 않다면 setTimeout을 사용하지 마세요.
그때 어떻게 해야 하나요?
벤치마킹하는 더 좋은 방법은 실제 그리기 부하를 사용하고 프레임 속도가 느려질 때까지 곱하는 것입니다. 예를 들어 카드 맵 지형지물이 있는 탑다운 게임을 작성하는 경우 프레임마다 카드 맵을 그리고 60FPS로 실행되는지 확인해 보세요. 그렇다면 로드를 늘립니다 (프레임마다 2번 카드 맵을 그리고 그 사이에 지우기). FPS가 새로운 안정적인 수준으로 떨어질 때까지 계속 증가시킵니다. 이제 프레임당 그릴 수 있는 카드 맵 레이어 수를 알 수 있습니다.
그래픽 애플리케이션마다 요구사항이 다르므로 이를 염두에 두고 벤치마크를 작성해야 합니다. 앱에서 사용 중인 그래픽 기능을 측정합니다. 느린 시나리오를 발견하면 이를 재현하는 가장 작은 코드로 줄여 보세요. 속도를 높여야 하는 경우 new.crbug.com에서 버그 신고를 제출하세요.
고성능 웹 그래픽 코드를 작성하는 방법을 알아보려면 Chrome GPU팀의 냇 두카와 톰 윌트지우스가 Google I/O 2012에서 진행한 강연을 확인하세요.