AFTER

08. CSS/JS 위치 조절

똑같이 무거운 스크립트지만 </body> 바로 앞으로 옮겼습니다. 본문 콘텐츠가 먼저 그려지고, 무거운 연산은 그 이후에 실행됩니다. DOMContentLoaded 시점이 Before보다 크게 앞당겨집니다.
📍 이 측정은 당신이 지금 쓰는 브라우저에서 실행됩니다.

Before (head, blocking) After (body 하단)

⏳ 메인 스레드 점유 중...

이 문단은 blocking-heavy.js가 로드되기 전에도 이미 화면에 그려져 있습니다.

🔧 실제 구현 코드

<head>...</head>
<body>
  ...본문 콘텐츠...
  <script src="/labs/08-css-js-placement/assets/blocking-heavy.js"></script>
</body>

같은 스크립트를 </body> 바로 앞으로 옮겼습니다. 본문 HTML이 먼저 파싱·렌더링되고, 무거운 스크립트는 그 이후에 실행되므로 DOMContentLoaded가 훨씬 앞당겨집니다.

← 실습 목록으로 돌아가기