HTML과 image
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<h3>포스트</h3>
<div>
<img src="./unsplash.jpg" />
</div>
</section>
</body>
</html>
-
HTML 다운로드의 끝과 파란색선(DOMContentLoaded) 사이의 간격은 브라우저가 DOM 트리를 빌드하는 데 걸리는 시간
-
이미지는 DOM 트리 빌드하는데 blocking하지 않는 것 같음
css와 javascript 추가
-
이제는 parser blocking 자바스크립트가 포함되어 있기 때문에 domContentLoaded 이벤트는 CSS가 다운로드되고 파싱될 때까지 block된다. (자바스크립트가 CSSOM을 조작할 수도 있기 때문에)
-
그래서 결국 css를 기다리고 javascript도 기다린 다음에야 이벤트가 발생
CSS는 기본적으로 렌더링 차단 리소스이기 때문에 HTML 최상단 Head 태그에 배치하도록 하여 빠르게 실행될 수 있게 하면 웹 성능 최적화에 도움이 되며 위와 같은 상황에 따라서는 parser blocking이 될 수도 있다.
css만 사용했을 때는 다음과 같다.
javascript에 async
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" rel="stylesheet" />
</head>
<body onload="measureCRP()">
<section>
<h3>포스트</h3>
<p>Hello <span>web performance</span> students!</p>
<div>
<img src="./unsplash.jpg" />
</div>
</section>
<script src="./timing.js" async></script>
</body>
</html>
-
스크립트에 async 키워드를 사용하면 parser 차단을 미룰 수 있다.
-
아래의 사진은 defer를 사용했을 때인데 원래 defer 또한 parser 차단을 미루고 async와는 다르게 HTML parsing이 끝나면 실행되는걸로 알고 있는데 왜 HTML Parsing 완료시점이 async와 다르게 미뤄진걸로 보이는지는 모르겠다..
Reference
