중요 렌더링 경로란
중요 렌더링 경로(Critical Rendering Path)는 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킨다. 중요 렌더링 경로는 Document Object Model (DOM), CSS Object Model (CSSOM), 렌더 트리 그리고 레이아웃을 포함한다.
중요 렌더링 경로 최적화는 첫번째 렌더링의 시간을 개선시킨다. 중요 렌더링 경로를 이해하고, 최적화 하는 것은 뛰어난 사용자 상호작용을 보장하며 버벅거림을 피할 수 있도록 하고, 1초당 60 프레임에 리플로우와 리페인트가 발생할 수 있도록 하는데 중요하다.
핵심 렌더링 경로를 이해하면 초기 페이지 렌더링이 필요 이상으로 차단되지 않도록 하여 웹 성능을 개선할 수 있다. 그러나 동시에 중요한 렌더링 경로에서 초기 렌더링에 필요한 리소스를 삭제하여 렌더링이 너무 일찍 일어나지 않도록 하는 것이 중요하다.
Construction part
Construction part는 html 파일을 브라우저가 이해할 수 있도록 브라우저의 언어로 변경한다.
→ DOM, CSSOM, Render Tree를 만드는 부분
Operation part
Operation part는 Construction part 에서 생성된 Render Tree를 이용해서 브라우저 window에 표기할 요소의 위치, 크기 등을 계산하고 그림을 그린다.
→ layout, paint, composition을 거쳐서 사용자에게 보여주는 부분
→ layout : Render Tree 각 요소들의 위치와 크기 계산, paint : 그림 그리기
→ 자바스크립트나 CSS로 돔 요소를 조작할때 composition만 다시 발생하는 것이 성능에 좋고, paint까지 다시 발생하는 것도 나쁘진 않지만, layout까지 다시 발생하는 것은 성능에 좋지 않다.
