브라우저 렌더링에 대한 이해

브라우저 렌더링 방식에대해 포스팅합니다.

 

Google Developer 문서를 보면서 아래 문구가 가장 와다았습니다.

일반적으로 '주요 렌더링 경로 최적화'란 HTML, CSS 및 자바스크립트 간의 종속성 그래프를 이해하고 최적화하는 것을 말합니다. 

 

간단히 설명하자면 HTML을 파싱하여 DOM을 만들고 CSS를 파싱하여 CSSOM을 만듭니다.

그리고 DOM과 CSSOM을 이용하여 Render Tree를 생성합니다.

그리고 생성된 Render Tree를 이용해 화면에 그리기 위해 좌표값을 계산하는 Layout(reflow)과정을 거친 후 Paint과정을 통해 화면게 그려지게 됩니다.

 

HTM => DOM (Document Object Model)

CSS => CSSOM (CSS Object Model)

 

 

Render Tree 생성과정

위에 내용이 전체적인 과정이라면 상세적인 순서에대해서 설명하겠습니다.

기본적으로 CSS는 렌더링 차단 리소스에 해당합니다.

CSS가 로딩 될 때까지 모든 컨텐츠 영역은 렌더링 되지않습니다.

CSS파일을 빠르게 로딩하고 Render Tree가 생성될 수 있도록 하여야 합니다.

CSS파일 사이즈를 줄이고 필요한 리소스만 로딩하는 것도 중요합니다.

미디어 쿼리등을 이용해 비차단 리소스로 정의할 수 있습니다.

<link href="print.css" rel="stylesheet" media="print">

(다운이 안되는것은 아니나 print과정에만 쓰일 경우 렌더링 비차단 리소스에 해당하므로 성능개선 효과가 있다)

 

자바스크립트 로딩과 렌더링과의 관계

HTML에서 <script>의 위치는 </body>위쪽에 놓는것이 좋습니다.

body태그 마지막에 두는것이 좋은 이유는 일반적인경우 DOM이 생성이 완료되고 스크립트를 실행하게 됩니다.

asyc를 사용하더라도 DOM생성전에 script가 로딩된다면 DOM 생성이 차단될 수 있습니다. 그러므로 body하단에 script태그를 위치 시키는 것이 좋습니다.

 

script태그에 async, defer등을 표기하지 않는다면 DOM 생성을 차단합니다. (이는 초기렌더링에 많은 지연을 가져옵니다

 

 

기본적인 내용만 정리했고 자세한 내용은 아래 링크를 참조해주세요.

 

참조

https://developers.google.com/web/fundamentals/performance/critical-rendering-path