브라우저 렌더링 알아보기

우리가 사용하는 크롬, 사파리 등등에서 페이지에 접속하게 되면 해당 페이지에서 제공하는 화면을 볼 수 있게 된다.

이렇게 우리가 볼 수 있는 브라우저 화면이 보여지는 과정은 어떻게 이루어져 있을까

렌더링 순서

렌더링 순서

1. HTML 다운로드: 브라우저는 웹 서버에게 HTML 파일을 요청하고, 이를 받아서 다운로드한다.
2. DOM 트리 생성: HTML 파일이 다운로드되면, 브라우저는 이를 분석하고 DOM (Document Object Model) 트리를 만든다. 각 HTML 요소(태그)는 DOM 트리의 노드가 된다.
3. CSSOM 트리 생성: HTML 문서가 외부 CSS 파일과 스타일 태그를 포함하고 있다면, 이들을 분석하여 CSSOM (CSS Object Model) 트리를 만든다.
4. 렌더 트리 생성: DOM 트리와 CSSOM 트리는 렌더 트리를 만드는 데 사용된다. 렌더 트리는 시각적 요소를 담고 있으며, 실제로 화면에 그려질 내용을 담는다. 렌더 트리는 DOM 트리에서 시각적으로 표현되지 않는 요소들(예: head 요소, display: none으로 설정된 요소)를 제거하고, CSSOM 트리로부터 시각적 속성(예: 색상, 크기 등)을 추가한다.
5. 레이아웃 (리플로우): 렌더 트리가 생성되면, 브라우저는 각 노드가 화면의 어디에 위치할지 계산한다. 이를 '레이아웃' 또는 '리플로우' 단계라고 한다.
6. 페인팅: 레이아웃 단계가 끝나면, 브라우저는 렌더 트리의 각 노드를 화면에 그리게 된다. 이를 '페인팅' 또는 '랜더링'이라고 한다.

 

DOM (Document Object Model)

Document Object Model(DOM)은 웹 페이지를 프로그래밍 언어가 이해하고 조작할 수 있는 구조로 변환하는 방법을 정의하는 API(Application Programming Interface)이다.

DOM은 웹 페이지의 내용, 구조, 스타일을 동적으로 변경할 수 있도록 도와주며, HTML, XHTML, XML 문서의 모델로 사용된다.

웹 페이지가 브라우저에 로드될 때, 브라우저는 페이지의 HTML을 받아 파싱하고, 이를 이용해 DOM 트리를 생성한다. 이 트리는 문서의 모든 요소와 속성, 텍스트를 객체로 표현하며, 이 객체들은 서로의 상하관계(parent, child, sibling 등)를 통해 연결된다.

 

작동 순서

1. HTML Parsing: 브라우저가 받은 원시 HTML 코드는 먼저 파서에 의해 해석된다. 이 파싱 과정에서 HTML 태그들은 DOM 노드로 변환된다.
2. DOM Tree Building: 파싱 된 HTML 태그들은 부모-자식 관계에 따라 트리 구조, 즉 DOM 트리를 형성한다. 이 트리는 JavaScript가 웹 페이지를 조작할 수 있는 구조를 제공한다.

 

CSSOM (CSS Object Model)

CSSOM(CSS Object Mode)이란, 웹 브라우저가 CSS를 해석하고 적용하는 방식을 말한다. CSSOM은 DOM(Document Object Model)과 비슷한 구조로, CSS 선택자와 속성들을 JavaScript에서 사용 가능한 트리 구조로 만드는 역할을 한다. 이렇게 해서 JavaScript는 CSSOM과 DOM을 통해 웹 페이지의 스타일과 구조를 동적으로 조작할 수 있게 된다.

 

작동 순서

1. 브라우저는 HTML 문서를 받아서 DOM 트리를 생성한다.
2. 병렬적으로 브라우저는 CSS 파일들을 받아 CSSOM 트리를 만든다. CSS 선택자는 트리의 노드로 표현되며, 선택자의 특정성(specificity)에 따라 트리의 깊이가 결정된다.

CSSOM은 웹 성능 최적화의 중요한 부분 중 하나인데, CSS 파일이 매우 크거나 복잡하면 CSSOM 트리의 생성이 오래 걸릴 수 있다. 이는 웹 페이지의 렌더링을 지연시키므로, CSS는 가능한 작고 단순하게 유지하는 것이 좋다. 또한, JavaScript에서 CSSOM을 변경하는 작업은 레이아웃 및 페인팅을 다시 수행하게 만들어 성능에 부담을 줄 수 있다.

 

JavaScript 코드 적용

JavaScript의 실행은 웹 페이지의 렌더링 프로세스에 큰 영향을 미친다. 기본적으로 HTML 문서를 파싱 하다가 <script> 태그를 만나면, 브라우저는 파싱을 멈추고 JavaScript를 실행한다. 이는 JavaScript가 DOM에 접근하고, 변경할 수 있기 때문이다. 이후 JavaScript의 실행이 끝나면 HTML 문서의 파싱이 다시 시작된다.

이런 동작 방식은 JavaScript 코드가 많거나 외부 자원에서 가져와야 하는 경우, 페이지의 로딩 시간이 길어질 수 있다. 이런 부분을 개선하기 위한 아래와 같은 방법들이 있다.

• 비동기 스크립트: async 속성을 사용하는 경우, 스크립트의 다운로드와 실행이 비동기적으로 처리된다. HTML 파싱과 동시에 스크립트를 다운로드하며, 다운로드가 끝나면 파싱을 잠시 멈추고 스크립트를 실행한다.
• 연기된 스크립트: defer 속성을 사용하는 경우, 스크립트의 다운로드는 비동기적으로 이루어지지만, 실행은 HTML 파싱이 완료된 후에 수행된다.
• DOMContentLoaded 이벤트: 이 이벤트는 HTML 문서가 완전히 로드되고 파싱 되었을 때, JavaScript가 아직 로드되지 않았을지라도 발생한다. 이를 활용하면 JavaScript 실행을 HTML 파싱이 완료된 이후로 미룰 수 있다.