브라우저는 무엇을 다시 그렸을까?

같은 장면을 두 방식으로 실행하고 프레임 차이를 직접 확인합니다.

01 / POSITION

같은 이동, 다른 렌더링 경로

사각형의 위치를 10초 동안 반복해서 바꿉니다. 조건은 같고 CSS 속성만 달라집니다.

비교할 방식top 위치 변경레이아웃 위치를 매 프레임 갱신transform 이동시각적 변환으로 같은 경로 이동

LIVE / CURRENT BROWSER

각 전략을 동일한 10초 조건으로 각각 실행해 rAF 간격과 Long Task를 기록합니다. 이 값은 움직임의 체감 안정성을 보여주지만 Layout·Paint 횟수를 뜻하지 않습니다.

top

top 실행 필요

transform

transform 실행 필요

두 전략을 각각 실행하면 같은 위치에서 비교됩니다.

TRACE / CHROMIUM CDP

웹 프레임 측정과 분리된 CDP pass에서 Chrome trace event를 집계합니다. trace overhead가 rAF 결과에 섞이지 않도록 같은 장면을 별도로 다시 실행합니다.

top

transform

횟수와 시간은 이 benchmark 환경의 관측값입니다. 적을수록 항상 제품 성능이 더 좋다는 뜻은 아니며, 단일 실행으로 보편적인 우열을 정하지 않습니다.

METHOD / WHY THESE SIGNALS

한 변수만 변경
같은 요소·절대 경로·1.25초 duration·easing을 고정하고 top과 transform 속성만 바꿉니다.
10초 고정 실행
60Hz에서 약 600개 interval을 얻으면서 수동 재실행이 길어지지 않게 잡은 프로젝트 기준이며 웹 표준 임계값은 아닙니다.
평균과 p95 병기
평균은 인접 rAF callback 간격의 전체 경향이지 FPS가 아닙니다. p95는 최댓값 한 번보다 반복적인 느린 구간을, 관측 프레임 수는 표본 규모와 10초 실행 완료 여부를 확인하기 위해 선택했습니다.
60Hz 기준 추정 누락
60Hz의 16.67ms 예산을 넘긴 간격을 환산한 추정치이며 GPU의 직접 dropped-frame 값은 아닙니다.
Long Task 경계
Long Task API의 50ms 기준으로 메인 스레드를 오래 점유한 작업의 횟수와 합계를 기록해, 느린 rAF 간격이 장기 점유와 함께 나타났는지 확인합니다.
CDP trace 분리
Layout·Paint는 일반 웹 API로 직접 읽을 수 없어 Playwright가 Chrome DevTools Protocol로 별도 수집합니다.