프론트엔드 개발자라면 필수로 알아야 하는 개념, Critical Rendering Path를 정리해보겠습니다.
Critical Rendering Path란?
Critical Rendering path란 브라우저가 HTML, CSS, 그리고 Javascript 코드를 픽셀로 변환하여 브라우저에 그리는 과정을 일컫는 개념입니다.
CRP를 이해하고 최적화한다면 브라우저 내 렌더링에 걸리는 시간을 단축할 수 있기 때문에, 이 개념을 잘 아는 것은 프론트엔드 개발자로써 매우 중요합니다! (면접에서도 단골 질문으로 나온다고 합니다.)
Critical Rendering Path는 위의 이미지와 같은 5개의 과정들을 거칩니다.
1. DOM 구축
브라우저가 최초로 서버에서 HTML코드를 요청한 후 받아와서 읽기 시작할 때, <html>, <body>, <div> 와 같은 수많은 html 태그들을 하나하나 읽기 시작합니다. 브라우저는 수많은 태그들을 마주칠 때마다 그것들을 Node 라는 자바스크립트 객체로 바꾸고, 그 수많게 생성된 Node 들은 위의 이미지와 같은 나무에서 가지가 뻗어나가는 형태의 모델, DOM(Document Object Model) 을 구축하게 됩니다.
💡 DOM은 브라우저에서 제공되는 웹페이지를 효율적으로 렌더하고 조작할 수 있게 도와주는 Web API 이지, 자바스크립트가 아닙니다. 자바스크립트는 DOM을 이해하지 못합니다.
2. CSSOM 구축
브라우저는 DOM을 구축한 이후 CSS를 읽고 DOM과 비슷한 형태의 CSSOM 이라는 가지 형태의 모델을 구축합니다. 이 트리에 포함된 각 노드들은 각 DOM 요소에 어떤 CSS 스타일링들이 들어갈지에 대한 정보들을 가지고 있습니다.
<meta>, <title> 같이 화면에 그려지지 않는 요소들은 CSSOM에 포함되지 않습니다.
3. Render Tree 구축
브라우저는 DOM과 CSSOM을 결합하여 구축된 Render Tree 라는 tree-like structure을 이용하여 페이지를 그리기 시작합니다. 반대로 말하면, Render Tree가 구축이 되지 않는다면 페이지를 그리지 않습니다.
Render Tree는 브라우저가 스크린에 그릴 것을 계산할 때 필요로 하는 최종 설계도라고 생각해도 되겠습니다.
4. Layout
이후 브라우저는 Render tree의 각 Node들의 layout 들을 생성하기 시작합니다. 각 layout들은 해당 node의 스크린에서의 포지션값, 사이즈와 픽셀값 등의 정보들을 가지고 있습니다. 이 일련의 과정을 레이아웃(layout) 과정이라고 하는데, 브라우저가 각 node들이 스크린에 어떻게 그려질지 레이아웃 정보들을 계산하고 구축하기 때문입니다.
💡 이 과정은 reflow 라고도 불리며, 화면을 스크롤하거나 브라우저 창 사이즈 조절, DOM으로 인한 요소 조정시에도 발생합니다.
Reflow를 트리거라는 이벤트들은 링크에서 확인하실 수 있습니다.
5. Paint
이제 브라우저는 그려져야 할 도형 및 요소들을 알고 있습니다. 브라우저는 이 요소들을 효율적으로 그리기 위해 각 요소들의 "레이어(layer)" 를 생성합니다. 이는 각 요소들의 변화(ex. css 애니메이션) 및 포지션값(ex. position: absolute)이 있을 경우 각각의 레이어로 관리하는 것이 더 효율적이기 때문입니다.
이 모든 과정이 끝나면, Compositing 과정에서 페인트 과정에서 생성된 각 레이어들의 정보값이 GPU에 전송되고, 페이지가 구현됩니다.
