렌더링 순서
브라우저는 제일 먼저 HTML 문서를 다운 받는다.
다운 받은 문서의 text를 바탕으로 DOM을 생성한다.
<head>의 <link>를 만나면 CSSOM도 같이 생성한다.
DOM과 CSSOM에는 문서의 요소가 되는 객체들이 트리 형태로 묶인다.
DOM과 CSSOM을 조합하여 화면에 렌더링 하기 위한 정보를 담은 렌더링 트리를 만든다.
화면에 표시하기 위해 위치 등의 정확한 px을 계산하는 레이아웃 또는 리플로우 과정이 이어진다.
이어지는 페인트 과정에서 화면에 색을 입히게 된다.
removeChild 등으로 페이지가 수정되면 DOM 생성 단계부터 이어진다.
<link>
기본적으로 CSS를 불러오기 전까지 렌더링이 차단 되기 때문에
지금 막 필요하지 않은 반응형에만 필요한 CSS 파일은 렌더링 이후에 다운 받도록 하면 속도 개선에 도움이 된다.
아래와 같이 media의 조건을 주면 렌더링이 다 끝난 이후에 CSS 파일을 다운 받는다.
<!-- 모든 경우에 적용 -->
<link rel="stylesheet" href="style1.css">
<!-- 인쇄될 때에만 적용 -->
<link rel="stylesheet" href="style2.css" media="print">
<!-- 조건에 일치할 때만 적용 -->
<link rel="stylesheet" href="style3.css" media="(max-width: 600px)">
<script>
HTML 태그를 파싱하다가 <script>를 마주치면 DOM 생성이 중단된다.
때문에 첫 페이지 렌더링에 필요한 script가 아니라면 차단을 해제하는 게 속도 개선에 좋다.
이를 위해 <script>에 async 속성을 넣으면 DOM 생성을 차단하지 않고 비동기적으로 script 파일을 다운 받는다.
<script src="app.js" async></script>
'HTML' 카테고리의 다른 글
| table 태그를 의미론적으로 제대로 쓰는 방법 (0) | 2021.05.01 |
|---|---|
| SEO를 위한 HTML 태그 작성 - title, meta (0) | 2021.02.15 |
| Data URL을 이용한 이미지 (0) | 2021.02.11 |
| 다양한 입력 태그들 예제 - Form 안에 들어가는 태그들 (0) | 2020.06.19 |
| 의미론적 HTML 태그 (0) | 2020.03.14 |