브라우저 렌더링

브라우저 렌더링

브라우저 렌더링은 웹 페이지가 사용자의 화면에 표시되는 과정을 말합니다

1. HTML 파싱: 브라우저는 서버로부터 받은 HTML 문서를 읽고, 이를 DOM(Document Object Model) 트리로 변환합니다. DOM 트리는 웹 페이지의 구조를 표현하는 트리 형태의 데이터 구조입니다.

2. CSS 파싱: HTML과 함께 로드된 CSS 파일이나 스타일은 파싱되어 스타일 규칙을 생성합니다. 이 규칙들은 렌더 트리 구축에 사용됩니다.

3. 렌더 트리 구축: DOM 트리와 CSSOM(CSS Object Model) 트리를 결합하여 렌더 트리를 생성합니다. 렌더 트리는 페이지의 렌더링에 필요한 모든 노드와 스타일 정보를 포함합니다. 이 트리는 실제로 화면에 표시되는 요소만을 포함합니다.

4. 레이아웃(Reflow): 렌더 트리가 완성되면, 각 노드의 정확한 위치와 크기를 계산하는 레이아웃 과정이 진행됩니다. 이 과정을 통해 각 요소가 화면의 어디에 위치해야 할지 결정됩니다.

5. 페인팅: 레이아웃 단계에서 계산된 위치와 크기를 바탕으로 실제 픽셀로 변환하는 과정입니다. 이 단계에서는 색상, 이미지 등이 적용됩니다.

6. 합성(Compositing): 여러 레이어로 나뉜 요소들을 합쳐 최종적으로 사용자에게 보여지는 단일 이미지를 만듭니다. 이 과정을 통해 페이지의 다양한 부분들이 최종적으로 화면에 표시됩니다.

이게 보편적인 렌더링 트리이다. 기본적으로 html과 css로만 작동하는 렌더트리이고
자바스크립트 스크립트를 HTML 문서에 삽입하는 경우, 브라우저 렌더링 과정에 몇 가지 추가적인 단계가 포함된다.

1. 스크립트 로딩: HTML 파싱 중
2. 스크립트 실행: 스크립트가 로드되면, HTML 파싱을 일시 중지하고 스크립트를 실행합니다. 이는 자바스크립트가 DOM을 조작할 수 있기 때문에, 스크립트 실행 전에 DOM 구성이 완료되어 있어야 합니다. 따라서 스크립트 실행은 렌더링 파이프라인을 차단할 수 있습니다.
3. DOM 조작: 자바스크립트는 DOM API를 사용하여 DOM 트리를 동적으로 변경할 수 있습니다. 이러한 변경은 렌더 트리의 업데이트를 필요로 하며, 필요에 따라 레이아웃, 페인팅, 합성 단계를 다시 수행하게 만듭니다.