렌더링 순서(Critical Rendering Path)

렌더링이란 브라우저에서 URL을 입력했을 때의 과정,

브라우저가 HTML, CSS, JavaScript를 화면에 표시되는 일련의 단계을 말한다.

렌더링 과정을 최적화하면 웹 성능을 향상시킬 수 있다.

 

렌더링(Critical Rendering Path)은 아래의 7단계를 거쳐 진행된다.

 

<Construction 단계>

①Request/Response : 브라우저가 HTML 파일을 요청한다.

②Loading : 파일을 받아와서 로딩한다.

③Scripting : DOM으로 변환, CSSOM으로 변환한다.

④Rendering : 브라우저 윈도우에 표기를 준비한다.

 

<Operation 단계>

⑤Layout : 최종적으로 계산된 CSS를 배치하고 위치시킨다.

⑥Paint : 요소를 어떻게 배치했느냐에 따라서 레이어 별로 화면에 픽셀(이미지)을 준비한다.

이 단계는 레이어가 생성되기 때문에 변경이 되거나 영향을 받는 요소가 생기면 전체가 다 로드되는 것이 아니라 그 영역만 화면에 다시 그려진다. 브라우저 자체에서 성능을 개선하기 위해 나타나는 현상이다.

CSS의 will-change라는 속성은 새로운 레이어를 만들기 때문에 남용하게 되면 성능에 좋지 않음

⑦Composition : 준비된 레이어를 브라우저에 표기 (움직이거나 변형만)

 

 

 

브라우저의 성능을 위해서는,

불필요한 태그를 남용하면 렌더링이 늦어지므로 자제하는 것이 좋다.

 

또한, DOM요소를 조작하거나 애니메이션이 일어나거나 할 때 Composition > Paint > Layout 순으로 발생하면 좋다.

 

Composition은 위치만 변경되기 때문에 성능에 가장 좋고,

Paint는 레이어가 다시 발생하여 이도저도 아닌,

Layout은 요소를 계속 재배치해야하므로 가장 좋지 않다.