렌더링이란?

렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다.

브라우저는 서버로부터 HTML 문서를 다운 받는다.
렌더링 엔진은 HTML 문서를 파싱(구문분석)해서 DOM 트리를 만든다.

그 다음, 외부 css 파일과 함께 포함된 스타일 요소를 파싱하여 CSSOM 트리를 만든다.
스타일은 브라우저의 자체 스타일, 사용자 정의 스타일, html 태그에 걸려있는 스타일 순서로 처리되며, 나중에 처리되는 스타일을 따르게 된다.

다음으로, DOM 트리와 CSSOM을 결합하여 렌더링 트리를 형성한다.

 

렌더링 정리하기

 

• HTML을 파싱하여 DOM 트리를 만든다.
• CSS를 파싱하여 CSSOM 트리를 만든다.
• DOM 과 CSSOM 을 결합하여 렌더링 트리를 만든다.
• 렌더링 트리에서 각 노드의 크기와 위치를 계산한다.
• 개별 노드를 화면에 그린다.