[JS] DOM 렌더링 과정

 

입사 후 첫 프로젝트에서 웹개발을 진행하게 되었을 때, 선배에게 참 많이 배웠다. 그 때 선배가 가장 많이 했던 말이

" DOM과 BOM이 뭔지 알아? " 이였다. 그 때 당시에는 당연히 알지 못했고 "DOM 렌더링 순서 공부해" 라는 말에  
공부했던 내용을 시간이 지나 다시 되짚어 보려 한다.

 

렌더링이란?

렌더링이란 HTML, CSS, JS등 리소스들을 화면에 그려주는 동작을 얘기한다. 브라우저마다 렌더링을 위한 서로 다른 엔진을 가지고 있다.

 

 

렌더링 순서

 

1. DOM( Document Object Model ), CSSOM( CSS Object Model ) 생성

 먼저 서버로부터 받은 HTML, CSS를 다운받습니다.  다운받은 소스를 이용해 Object Model을 생성합니다.

 

DOM 시각화  - 출처 : http://bit.ly/3137pmh

 

 

2. Render Tree 생성

 DOM Tree와 CSSOM Tree를 이용하여 Render Tree를 생성한다. Render Tree에는 스타일 정보가 설정되어 있으며 실제 화면에 표현되는 노드들로만 구성된다.

 

3. Layout

 각 노드가 화면(브라우저의 viewport) 어디에 위치해야 되는지 계산하는 과정이다. 

 

 

4. Paint

 화면에 실제 픽셀에 맞춰 그려내는 과정이다 . 처리해야하는 스타일이 복잡할수록 Paint 단계의 소요시간이 증가한다. 

(화면의 Reflow, Repaint 과정을 줄여야 화면성능의 최적화를 가져올 수 있다.)

 

 

※ 수정이 필요한 내용에 대해선 댓글 남겨주시면 수정토록 하겠습니다.