[Web] 웹 페이지 랜더링 과정

브라우저에서 렌더링 성능은 중요한 요소 가운데 하나입니다. 렌더링 성능을 향상시키면 사용자가 느끼는 체감 속도를 개선할 수 있습니다. 자바스크립트로 동적인 작업을 실행할 때의 렌더링 문제를 최소화하여 성능을 높일 수 있습니다. 

1. 랜더링 과정

렌더링이란 논리적인 문서의 표현식을 그래픽 표현식으로 변형시키는 과정입니다. 일반적인 전체 흐름은 브라우저에 문서가 로딩됨에 따라 DOM 트리의 구성이 진행되면 레이아웃을 계산한 후 문서에 요소를 그립니다.

 

렌더링이 진행되는 과정

다음은 HTTP 요청 후 응답을 통해 구현되는 전체적인 브라우저의 처리 과정입니다.

 

1.1 DOM 트리 생성

노드를 트리형태로 나타내는 것을 의미합니다.

1.2 스타일 구조체 생성

첫번째와 같이 트리가 완성 됐다면 스타일 구조체를 생성합니다. 브라우저의 자체 스타일, 사용자 정의 스타일 ( 내가 만든 CSS ), html태그의 style 속성 단계로 처리됩니다. 후에 처리되는 스타일을 따르게 됩니다. (ex) css에 높이를 줘도 html 태그에 스타일 속성에 높이를 지정했다면 후자가 적용 됩니다.)

1.3 랜더 트리 생성

첫번로 만든 DOM트리와 그다음 스타일 구조를 더해 렌더 트리를 만듭니다. 랜더 트리는 노드에 스타일 정보가 설정돼 있고 화면에 표시되는 노드입니다. ( 따라서, display속성이 none으로 되어 있다면 이는 랜더 트리에 속하지 않습니다. 또한 head body태그 또한 동일합니다.)

1.4 레이아웃 처리

스타일을 적용했으니 이제 노드의 크기 계산과 해당 위치에 배치를 해야합니다.

1.5 페인트

마지막으로 페인트 ( Paint ) 작업입니다. 영어 뜻 그대로 스타일, 크기, 배치가 끝났으니 화면에 노드를 표현하는 작업입니다.

REFERENCE

https://do-dam.tistory.com/68