참고: 이웅모 《모던 자바스크립트 Deep Dive》 38장 · 본인 말로 정리 (원문 긴 인용·캡처 없음)

보강: MDN Critical rendering path, How browsers work, web.dev script loading

알고 쓰니? 😅

“화면이 느리다”는 말은 많이 했는데, 브라우저가 HTML을 받아 픽셀로 만들기까지 뭐가 일어나는지 순서대로 말하라면… 대답은 아니요에 가까웠다.

script는 body 끝에 두면 된다? defer랑 async는 비슷하다? CSS는 파서를 안 막으니까 뒤로 미뤄도 된다?

Deep Dive 38장 읽다 멈춘 지점이 많았다.

그래서 MDN Critical Rendering Path(CRP)랑 web.dev 스크립트 로딩 글을 같이 찾아봤다.

아래는 헷갈림 → 찾아봄 → 정리됨 일기.

브라우저가 하는 일, 한 줄 파이프라인

요청으로 HTML을 받는다 (Deep Dive 38.1).

HTML → DOM, CSS → CSSOM (38.3~38.4).

둘을 합쳐 렌더 트리 → 레이아웃(기하) → 페인트(픽셀) → 필요하면 합성 (38.5~38.7).

중간에 JS가 끼면 파서가 멈추거나 트리가 다시 계산된다 (38.6·38.8·38.9).

이게 무슨 말이냐.

요리로 치면 HTML은 재료 목록, CSS는 플레이팅 규칙, JS는 주방에서 갑자기 레시피를 바꾸는 손님이다.

손님이 중간에 끼면 요리가 늦어진다.

HTTP 버전은 왜 나와?

Deep Dive 38.2절에 HTTP/1.1 vs 2.0이 나온다.

처음엔 “네트워크 장 아니야?” 싶었다.

찾아보니 CRP 앞단이 네트워크다.