CRP 테스트

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

[python/백준] 10989: 수 정렬하기 3
[개발일지8일차]플라스크 앱에 데이터베이스 연동

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage