브라우저 렌더링 원리에 대해서

브라우저 렌더링

[출처] https://hyungju-lee.github.io/hyungju-lee2022.github.io/computer_science/computer_science10/

 

웹 페이지의 HTML/CSS/JavaScript 등의 리소스를 받아서 사용자가 볼 수 있는 시각적인 화면으로 변환하는 과정을 의미한다. 이를 위해 브라우저는 다양한 단계를 거쳐서 웹 페이지를 처리하고 렌더링한다. 일반적인 브라우저 렌더링의 주요 단계이다.

1. HTML 파싱과 DOM트리 구축
2. CSS 파싱과 스타일 트리 생성 
3. 레이아웃과 페인트
4. 자바스크립트 실행
5. 최적화와 리플로우 최소화

간단하게 위와 같이 정리 할 수 있고 하나하나 보면 이렇다.

HTML 파싱과 DOM트리 구축

브라우저는 서버로부터 받은 HTML 문서를 파싱하여 DOM트리를 생성한다. DOM은 문서의 구조와 요소간의 관계를 표현하는 트리구조입니다.

 

CSS 파싱과 스타일 트리 생성

브라우저는 HTML 파싱중에 만들어진 DOM트리와 함께 외부에서 불러온 CSS스타일 시트를 파싱하여 스타일 트리를 생성한다. 이 트리는 각 요소에 대한 스타일 정보를 포함한다.

 

레이아웃과 페인트

스타일 트리를 기반으로 각 요소의 크기와 위치 등을 계산하고 레이아웃을 수행한다. 이는 화면에 어떻게 배치될지 계산하는 단계이다.

계산된 레이아웃 정보를 바탕으로 화면에 실제로 픽셀을 그리는 페인트 과정이 이어진다. 이 단계에서는 각 요소의 색상,배경,그림자 등이 실제 화면에 표시된다.

 

자바스크립트 실행

페이지에 포함된 JavaScript 코드가 실행되며, DOM을 수정하거나 스타일을 변경 할 수 있다. 이로 인해 렌더 트리가 변경되고 , 변경된 부분은 다시 레이아웃과 페인트 단계를 거쳐 화면에 업데이트 된다. 

 

최적화와 리플로우 최소화

브라우저는 최적화 기법을 사용해 레이아웃과 페인트의 비용을 최소화하려고 노력한다. 리플로우는 레이아웃을 다시 계산하는 것으로 비용이 높은 작업 중 하나이므로 최대한 최소화하는 것이 중요하다. 

 

위와 같은 단계들로 브라우저의 엔진에 따라 조금씩 다를 수 있다. 최근에는 브라우저들이 페이지 로딩 속도와 성능을 개선하기 위해 다양한 최적화 기법을 도입하고 있다.