[JavaScript] 브라우저의 렌더링 과정

 

 

브라우저의 렌더링 프로세스는 HTML, CSS 및 JavaScript와 같은 웹 페이지의 리소스를 불러와 브라우저 창에 보여주는 과정을 말합니다. 브라우저는 웹 페이지를 렌더링하기 위해 여러 단계를 거치게 됩니다.

 

요청과 응답

웹 페이지를 렌더링하는 과정에서 가장 먼저 수행되는 단계는 서버로부터 HTML, CSS, JavaScript 파일 등의 리소스를 요청하는 것입니다. 이를 요청(request)이라고 합니다. 브라우저는 URL 주소를 통해 요청을 보내고, 서버는 요청을 받아 해당하는 리소스를 찾아서 응답(response)합니다. 이 응답은 HTTP 프로토콜을 통해 전송되며, 응답은 여러 가지 상태 코드를 가질 수 있습니다. 성공적으로 리소스를 찾아 응답하는 경우에는 200 상태 코드가 반환되고, 실패하는 경우에는 4xx나 5xx 상태 코드가 반환됩니다.

 

요청과 응답은 HTTP 프로토콜을 통해 이루어지므로, 이 프로토콜에 따라 요청과 응답 메시지의 구조와 내용이 결정됩니다. 요청 메시지에는 요청하는 리소스의 정보와 추가적인 정보(쿠키, 헤더 등)가 포함되며, 응답 메시지에는 요청한 리소스의 내용과 상태 코드, 추가적인 정보 등이 포함됩니다.

 

웹 페이지에서는 이러한 요청과 응답 과정이 여러 번 반복되어야 하므로, 웹 페이지의 로딩 속도는 이러한 과정의 효율성에 크게 영향을 받습니다. 따라서 웹 개발자는 요청과 응답을 최적화하기 위한 여러 가지 방법을 고려해야 합니다. 예를 들어, 리소스를 최적화하거나, 브라우저 캐시를 활용하거나, HTTP/2나 HTTP/3과 같은 새로운 프로토콜을 적용하는 등의 방법이 있습니다.

DOM(Document Object Model) 생성

브라우저는 웹 페이지의 HTML을 파싱하여 DOM 트리를 생성합니다. DOM은 HTML 문서의 계층적인 구조를 표현한 객체 모델입니다. 이 단계에서는 HTML 문서에 포함된 각 요소와 속성이 DOM 트리의 노드로 변환됩니다. 이 과정에서 브라우저는 head 태그 안의 리소스들(예: CSS, JavaScript)을 다운로드합니다.

CSSOM(CSS Object Model) 생성

브라우저는 HTML의 DOM 트리를 생성한 후 CSS를 파싱하여 CSSOM을 생성합니다. CSSOM은 CSS 규칙의 계산된 모델입니다. 이 단계에서 브라우저는 CSS 파일 및 스타일 요소를 읽어들이고, CSSOM 트리를 생성합니다.

Render Tree 생성

브라우저는 DOM과 CSSOM을 이용하여 Render Tree를 생성합니다. Render Tree는 브라우저가 표시하는 실제 노드입니다. Render Tree에는 렌더링 되어야 할 요소만 포함됩니다.

레이아웃(Layout)

Render Tree를 생성한 후, 브라우저는 레이아웃 과정을 시작합니다. 이 단계에서는 각 노드의 위치와 크기가 계산되며, 화면에 표시되는 영역이 계산됩니다.

페인팅(Painting)

Render Tree와 레이아웃 과정이 완료되면 브라우저는 페인팅 과정을 시작합니다. 이 단계에서는 실제로 화면에 그리는 작업이 이루어지며, 각 노드가 배치된 위치에 따라 픽셀 단위로 그려집니다.

리플로우(Reflow) 및 리페인트(Repaint)

레이아웃이나 스타일 변경 등의 작업이 수행될 경우, 브라우저는 리플로우(Reflow) 및 리페인트(Repaint) 작업을 수행합니다.

페인팅 작업을 수행하기 전에 변경된 요소의 레이아웃이 재계산되어야 할 때, 브라우저는 해당 요소와 그것에 영향을 받는 노드들의 크기와 위치를 다시 계산하고, 변경된 노드를 포함하는 Render Tree를 재생성합니다. 이를 리플로우(Reflow)라고 합니다. 이 과정은 비용이 많이 들어가기 때문에, 특히 큰 웹 페이지에서는 최소화하는 것이 좋습니다.

 

반면, 리페인트(Repaint)는 변경된 노드의 스타일만 변경되어 다시 그려져야 할 경우에 발생합니다. 이 경우에는 레이아웃이 변경되지 않았으므로, 리플로우보다 비용이 적게 듭니다.

마무리

이렇게 브라우저는 위와 같은 단계를 거쳐 웹 페이지를 렌더링합니다. 이 중에서도 DOM 생성과 CSSOM 생성은 초기 로딩 시간에 가장 많은 시간이 소요되므로, 웹 개발자는 HTML과 CSS를 가능한 간결하게 작성하는 것이 성능 향상에 도움이 됩니다.

 

또한, JavaScript 코드가 실행되는 시점도 렌더링 프로세스에 영향을 미칩니다. JavaScript가 DOM을 수정하거나 CSSOM을 변경할 경우, 렌더링 과정이 다시 시작될 수 있습니다. 따라서 웹 개발자는 JavaScript 코드의 실행 시점과 위치를 신중하게 고려하여 렌더링 성능을 최적화해야 합니다.