브라우저 렌더링 (feat. 쌓임 맥락)

이전 게시물에서는 브라우저에서 서버로부터 응답을 받는 과정을 포스트 했는데요. 이번에는 서버로부터 응답받은 HTML, CSS, JavaScript를 브라우저에서 어떻게 렌더링 하는지(Critical Rendering Path)에 대해 적어 보려고 합니다. 1. DOM, CSSOM Tree 생성 서버로부터 받은 HTML 파일을 어휘 분석을 통해 토큰 화합니다. 그리고 이토큰 은 해당 속성과 규칙을 정의하는 노드 객체로 변환 됩니다. 그리고 각 노드가 트리를 생성하여 DOM Tree를 생성합니다. 그리고 CSS 역시 파싱 하여 CSSOM Tree를 생성합니다. 2. Render Tree 생성 Document 객체부터 각 노드를 순회하면서 각각의 CSSOM 찾아 규칙을 적용하여 Render Tree를 생성합니다. 최종적으로 화면에 표시되는 모든 노드와 노드의 스타일 정보를 포함합니다. 3. Render Tree 배치 (reflow) 노드들의 크기와 위치, 레이어 간 순서 정보를 계산합니다. 여기서 레이어란 Z 축을 활용하는 3차원 개념입니다. 가상의 Z 축을 사용한 HTML 요소의 3차원 개념이며 최상위 엘리먼트를 가장 아래에 두고 하위 엘리먼트가 위로 쌓입니다. 이를 쌓임 맥락(stacking context)이라 합니다. 그리고 reflow는 주로 요소의 크기나 위치가(width, height, margin 등) 바뀌었을 때 다시 발생합니다. 4. Render Tree 그리기(repaint) Render Tree에 배치된 엘리먼트에게 색을 입히고 레이어의 위치를 결정합니다. 이때, 스타일이 복잡할수록 Paint 시간이 늘어납니다. 5. Composite Paint 단계에서 최종적으로 생성된 레이어를 합성하여 실제 화면에 나타냅니다. 아마 다들, transform과 opacity는 reflow와 repaint를 유발하지 않는 대표적인 속성으로 알고 계실 텐데요. 실은 무조건적으로 유발하지 않는것은 아닙니다. 만약 opacity 기본값이 1이하 이면, 이는 쌓임 맥락이 생성되는 조건에 해당하여 쌓임 맥락에 추가됩니다. 그래서 opacity 속성이더라도 때에 따라서는 reflow, repaint, 혹은 composite 단계에서 실행이 될 수도 있습니다. 쌓임 맥락이라는 개념이 다소 생소하신 분들도 계실텐데요. 좀 더 궁금하시다면 첨부해 드린 MDN 링크를 확인해 보시기 바랍니다.