브라우저 렌더링 파이프라인 – 실습 중심 보강 자료

0) 한 장 요약 (비유)

DOM 만들기: 레고 설명서를 읽어(HTML 파싱) 블록 목록을 만든다(DOM).
CSSOM 만들기: 색·재질 설명서(CSS 파싱)로 스타일 목록을 만든다(CSSOM).
Render Tree: 화면에 실제 올릴 블록만 골라 조립도(Render Tree)를 만든다.
Layout: 각 블록의 정확한 좌표·크기를 계산한다.
Paint: 색칠, 텍스처, 글자, 그림자 등을 칠한다.
Compositing: 레이어별 캔버스를 겹쳐서 최종 화면을 합성한다.

1) HTML 파싱 & 스크립트 차단 (DOM 생성과 “2.5 JS 실행”의 관계)

실습 1-1: 블로킹 스크립트의 영향

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>Blocking Script Demo</title>
    <!-- CSS는 다운로드/파싱이 지연되면 CSSOM이 늦어져 render tree가 늦어짐 -->
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <h1 id="title">안녕하세요</h1>
    
    <!-- ✅ 비차단: defer는 DOM 파싱 완료 후 실행 -->
    <script defer src="./deferred.js"></script>

    <!-- ✅ 블로킹: HTML 파싱이 여기서 멈춤 -->
    <script>
      const start = performance.now();
      // 파싱 차단을 체감하기 위해 일부러 바쁜 작업
      const endTime = performance.now() + 100; // 100ms busy-wait
      while (performance.now() < endTime) {}
      console.log('blocking script done in', performance.now() - start, 'ms');
    </script>

    <p>이 문장은 스크립트 실행이 끝난 뒤에야 파싱됩니다.</p>
  </body>
</html>

확인 방법

DevTools → Performance 기록 시작 → 새로고침.
Main 트랙의 Parse HTML 중간에 Evaluate Script가 끼어들어 파싱이 잠깐 멈춘 지점을 확인.

포인트

<script>는 기본적으로 HTML 파싱을 차단합니다.
defer/async를 적절히 쓰면 파이프라인 지연을 줄일 수 있어요.
- defer: DOM 파싱 완료 후 실행(순서 보장).
- async: 다운로드 끝나는 즉시 실행(순서 비보장).

0) 한 장 요약 (비유)

1) HTML 파싱 & 스크립트 차단 (DOM 생성과 “2.5 JS 실행”의 관계)

실습 1-1: 블로킹 스크립트의 영향

2) CSSOM & Render Tree – display: none이 왜 빠질까?

2) CSSOM & Render Tree – `display: none`이 왜 빠질까?