4. 초기 렌더링의 핵심 병목

초기 렌더링(CRP)의 핵심 병목은 다음과 같음
1.렌더링을 차단하는 CSS
2.파싱 작업을 차단하는 JS
→ CSS와 JS는 CRP에 꼭 필요한 필수 리소스(Critical resources)

1. 렌더링 차단 리소스, Render-blocking resources

브라우저의 렌더링 작업을 중단시키는 리소스를 렌더링 차단 리소스 라고 함

CSS와 같은 리소스는 초기 렌더링 과정에서 중요한 역할을 수행하기 때문에(CSSOM 구성), 브라우저가 해당 리소스를 다운로드를 완료할 때까지 렌더링 과정이 중단됨

따라서 브라우저가 HTML 문서를 파싱하는 과정에서 <style>로 작성된 방식이나 <link href="..."를 통한 외부 파일 방식의 CSS 코드 라인을 마주치면, 해당 CSS 코드를 처리하거나, 다운받을 때까지 렌더링 작업을 멈추게 됨

브라우저는 HTML을 화면에 그려내기 위해 파싱 작업을 지속적으로 수행하는데, 이러한 파싱 작업을 중단시키는 리소스를 파서 차단 리소스 라고 함

대표적인 파서 차단 리소스는 JavaScript

기본적으로 JavaScript는 페이지에 렌더링될 HTML Element들을 구성하는 DOM을 조작할 수 있고, CSS style을 구성하는 CSSOM 역시 조작할 수 있기 때문에 HTML 문서의 파싱 작업을 차단하는 리소스로 동작함

index.html


<!-- async/defer 키워드는 예외 -->
<script src="app.js"></script> <!-- 파서 차단 -->
<script defer src="app.js"></script> <!-- 파서를 차단하지 않음(혹은 async) -->

따라서 브라우저는 JavaScript가 페이지의 HTML에 영향을 미칠 수 있는 코드를 확인/파악하기 전까지는 파싱 작업을 완벽하게 처리할 수 없게 되는 것

이러한 파서 차단 리소스 역시 렌더링을 차단하는 리소스에 속한다고 볼 수 있는데, 왜냐하면 아직 파싱 작업이 끝나지 않았을 경우 렌더링도 수행할 수 없게 되기 때문
→ (HTML 파싱 → DOM 구성)

index.html


<body>
    <div>app.js 실행 시작 전</div>
    <script src="app.js"></script>
    <div>app.js 실행 완료 후</div>
</body>

app.js


for (;;) {} // 무한 루프

→ HTML을 파싱하는 작업을 수행하는 메인 스레드가 app.js의 무한 루프를 실행하기 때문에 페이지에는 app.js 실행 시작 전만 출력되고, 브라우저의 HTML 파싱은 차단됨(해당 탭은 무한 로딩 스피너)