이전에 포스팅한 렌더링 관련 튜토리얼들은 웹킷 혹은 크롬의 렌더링 모델이 취하는 구조나 그로 인한 렌더링 성능의 형태 및 최적화에 대해 논의한 글이었습니다. 그리고 이 튜토리얼은 조금 다른 관점에서의 렌더링 성능과 관련하여 가중치와 그 측정 방법에 대해 논의하고 있습니다. 특히, CSS의 속성들의 조합이 그 각각의 페인트 시간의 합보다 더 많은-심지어 훨씬 더 많은- 시간을 소모할 수 있다는 것은 특별히 더 염두에 두어야 할 내용 중의 하나입니다. :)
"GPU 기반으로 가속되는 그래픽스의 성능 향상은 웹에서도 많은 효과를 가능하도록 만들었습니다. 그러나 그래픽스 시스템이 가지는 특성으로 인해 이러한 효과들이 조합되는 경우 중 어떠한 것들은 우리가 기대하는 바와는 달리 더 많은 렌더링 시간을 차지하여 예상치 못한 성능 상의 영향을 주기도 합니다."
TL;DR;
크롬에서의 하드웨어 가속 경로는 페이지를 페이지의 시각적요소를 레스터화하여 타일들로 출력(Paint)하며 이를 합성(Compositing)을 통해 최종적으로 출력합니다. 그리고 CSS에 의한 렌더링 모듈은 각각이 다른 동작을 수행합니다. 그렇다면 그러한 다른 CSS 속성이 여러분의 페이지를 렌더링하는 비용에 어떤 영향을 줄까요?
- 일반적으로 더 비싼 렌더링 비용이 드는 CSS 속성들이 있습니다. 예를 들어 opacity는 빠르게 처리되지만 그라데이션이나 그림자는 그렇지 않습니다.
- CSS 속성의 조합은 그들 부분의 합보다 훨씬 더 많은 페인트 시간을 가질 수 있습니다. 즉, A와 B에 해당하는 2가지의 CSS가 하나의 엘리먼트에서 결합될 때 예상과는 다르게 A + B보다 렌더링의 시간이 더 걸린다는 것입니다.
정확하게 판별하자면 CSS의 속성뿐만이 아니라 그 값과 그에 이어지는 다른 속성과의 조합에 따라 성능은 달리 나타날 수 있습니다. (어떤 CSS 속성들이 비용을 발생하는지는 크롬 개발자도구의 Continuous Paint mode를 사용하여 알 수 있습니다.) 이 튜토리얼은 이러한 성능을 어떻게 평가할 수 있는지에 대한 기초적인 이해에 도움될 것입니다.
번역 링크
- CSS 페인트 타임과 페이지 렌더 가중치
참고 글
- 브라우저의 렌더링 관련 튜토리얼들
)을 클릭하시기 바랍니다. [
