BEFORE

08. CSS/JS 위치 조절

<head>에 ~700ms 동안 메인 스레드를 점유하는 스크립트를 렌더링 차단(render-blocking) 상태로 넣었습니다. 아래 본문 콘텐츠가 화면에 그려지기까지 지연되는 걸 체감해 보세요.
📍 이 측정은 당신이 지금 쓰는 브라우저에서 실행됩니다.

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

이 문단은 blocking-heavy.js 실행이 끝나야 비로소 화면에 그려집니다.

🔧 실제 구현 코드

<head>
  ...
  <script src="/labs/08-css-js-placement/assets/blocking-heavy.js"></script>
</head>
<body>...</body>

<head>의 <script>는 기본적으로 render-blocking입니다. 브라우저는 이 스크립트를 내려받고 실행을 마칠 때까지 HTML 파싱과 화면 렌더링을 멈춥니다.