브라우저 랜더링 과정
HTML 파싱
1. 바이트 스트림
웹 서버에서 브라우저로 HTML 파일이 전송될 때, 데이터는 8비트 단위로 전송된다. 이 8비트 단위의 연속이 바이트 스트림을 형성한다.
2. HTML 마크업으로 변환
바이트 스트림이 브라우저에 도착하면, 문자(character)로 변환한다.
3. 토큰화
HTML 마크업을 토큰(token)으로 분해한다.
예: <html> 태그는 하나의 토큰, </html> 태그는 또 다른 토큰으로 분해
HTML 파싱에서 토큰이란 의미를 가지는 최소 단위를 뜻한다.
4. 노드로 변환
각 토큰의 관계성을 부여하기 위해 DOM(Document Object Model) 트리를 구성하는 Node로 변환한다.
5. DOM 트리 생성
노드를 바탕으로 DOM 트리를 생성하여 HTML 문서의 구조를 계층적으로 나타낸다. 이 과정에서 link 와 img 태그를 만나면 다운로드 진행한다. 결과적으로 브라우저가 HTML문서를 렌더링할 때 사용된다.
script 위치에 따른 파싱 차이
HTML 파싱 중에 브라우저가<script>태그를 만나면 DOM 생성을 멈추고 해당 스크립트를 다운로드 및 실행한다. 이는 전체 페이지 로딩 속도에 영향을 준다.
- defer 속성을 사용했을 때
브라우저는 DOM 생성이 완료된 후 스크립트를 실행한다.<script src="example.js" defer></script>
- async 속성을 사용했을 때
스크립트를 비동기적으로 다운로드하고 실행한다. 스크립트는 다운로드 즉시 실행되며, 스크립트 실행 도중에는 DOM 생성을 중단한다.<script src="example.js" async></script>
- 스크립트를
<body>태그의 끝에 배치했을 때
DOM이 거의 생성된 상태에서 스크립트가 로드되므로 DOM 생성이 중단되지 않는다.<body> <!-- HTML Content --> <script src="example.js"></script> </body>
CSS 파싱
CSS도 HTML 파싱 과정과 비슷한 과정을 거쳐 CSSOM 트리를 생성한다.
바이트 스트림 -> 문자화 -> 토큰화 -> 노드로 변환 -> CSSOM 트리 생성
Render Tree
DOM 트리와 CSSOM 트리를 결합하여 랜더 트리를 생성한다. 각 요소가 화면에 어떻게 표시되어야 하는지 보여준다. 단, 렌더 트리는 시각적 요소들만 포함하며, display: none 속성을 가진 요소들은 포함되지 않는다. 웹 접근성 부분에서 신경써야 하는 부분이다.
Layout
레이아웃 단계에서는 렌더 트리의 각 요소들이 화면의 어디에, 어느 크기로 배치될지를 계산하여 배치한다.
Reflow
레이아웃 계산이 다시 수행되는 과정.
DOM이나 CSSOM의 변경으로 인해 발생하며, 이는 성능에 큰 영향을 줄 수 있다. 특히, 트리의 상위 요소에서 변화가 발생하면 하위 요소들도 모두 재계산된다.position(top, left, bottom, right), width, height, margin, padding...
Painting
페인팅 단계에서는 각 요소에 대한 시각적 표현이 픽셀 단위로 그려진다. 색상, 테두리, 그림자 등 모든 스타일이 이 단계에서 적용된다.
Repaint
리페인트는 요소의 스타일이 변경되어 화면에 다시 그려지는 과정.
레이아웃 변화 없이 시각적 속성만 변경되는 경우 발생한다.background, box-shadow, border-radius, color...
Reflow, RePaint 발생하지 않는 속성
다음 CSS 속성은 DOM를 조작하지 않고, GPU 가속을 통해 성능을 최적화할 수 있다.
transform, opacity
Compositing
최종적으로, 브라우저는 여러 레이어를 결합하여 최종 화면을 구성한다.
참고
