DevTools Continuous Painting Mode를 활용한 페인팅 성능 프로파일링
Source
Evernote/Article Scraps/Profiling Long Paint Times with DevTools' Continuous Painting Mode.md
Summary
Chrome Canary의 DevTools에 도입된 ‘Continuous Painting Mode’는 페이지의 페인팅(Paint) 성능 병목 현상을 식별하는 도구입니다. 스크롤 시 화면이 끊기는 문제를 해결하기 위해, 개발자는 Timeline 레코딩과 ‘Show paint rectangles’를 통해 재페인팅 영역을 확인합니다. Continuous Painting Mode는 페이지를 지속적으로 재페인팅 상태로 유지하며, 실시간 페인팅 시간(ms)을 그래프로 표시합니다. 개발자는 Elements 패널에서 요소의 가시성을 토글(H 키)하거나 CSS 스타일을 켜고 끄면서 페인팅 시간 그래프의 변화를 관찰하여, 성능에 부정적인 영향을 미치는 특정 요소나 스타일(예: box-shadow, border-radius)을 신속하게 찾아낼 수 있습니다.
Key Points
- Chrome Canary DevTools의 ‘Continuous Painting Mode’는 페인팅 성능 병목 지점을 찾는 데 사용됩니다.
- Timeline 레코딩과 ‘Show paint rectangles’ 설정을 통해 재페인팅이 발생하는 영역과 원인을 시각적으로 확인합니다.
- Continuous Painting Mode 활성화 시, 상단 우측에 실시간 페인팅 시간(ms)과 최근 80프레임의 히스토그램이 표시됩니다.
- Elements 패널에서 요소 선택 후 ‘H’ 키로 가시성을 토글하거나 CSS 스타일을 직접 수정하며 페인팅 시간 그래프의 변화를 관찰합니다.
- 페인팅 시간이 급격히 증가하는 요소나 스타일(예: 복잡한 그림자, 테두리 반경)을 식별하여 최적화합니다.
- 페인팅 시간 측정값은 화면 해상도, 창 크기, 하드웨어 성능에 따라 달라질 수 있음을 고려해야 합니다.