Progressive Rendering
점진적 렌더링(Progressive Rendering, PR)
점진적 렌더링(Progressive Rendering)은 서버에서 웹 페이지의 일부를 순차적으로 렌더링하고 전체 페이지가 렌더링 될 때까지 기다리지 않고, 부분적으로 클라이언트에 스트리밍하는 기술이다.
웹은 본질적으로 분산되어 있다.
사용하기 전에 설치되는 네이티브 애플리케이션과 달리 브라우저는 페이지를 렌더링하는 데 필요한 모든 리소스가 웹사이트에 있다고 가정할 수 없다.
따라서 브라우저는 페이지를 점진적으로 렌더링하는 데 매우 능숙하다.
c.f. https://web.dev/learn/performance/understanding-the-critical-path
때문에 브라우저는 반드시 기다려야하는 리소스와, 기다리지 않아도 되는 리소스를 분리하고 있다.
기다리지 않아도 되는 리소스
중요한 점은 초기 렌더링의 경우 브라우저는 일반적으로 다음을 기다리지 않습니다.
- 모든 HTML
- 글꼴
- 이미지
- <head> 요소 외부의 렌더링을 차단하지 않는 JavaScript (예: HTML 끝에 배치된 <script> 요소)
- <head> 요소 외부의 렌더링 차단이 아닌 CSS 또는 현재 뷰포트에 적용되지 않는 media 속성 값이 있는 CSS브라우저가 기다리지 않는 요소 중에 이미지가 있다는 게 신기했다.
이미지를 나중에 렌더링을 하면 이미지는 레이아웃이 깨지지 않는가?!
=> 전문용어로 레이아웃 시프트 이슈라고 한다.
브라우저는 이미지는 용량이 크고 다운로드 시간이 걸리기 때문에, 비동기로 로드하는 것이 더 중요하다고 판단한다.
보통 브라우저는 그 공간을 확보하고 렌더하게 되는데, 만약 width/height 속성이 없다면 레이아웃 시프트 발생
(이미지 태그에 width/height 속성 명시가 중요한 이유)
기다리는 리소스도 있다
Render Blocking 요소 라고 한다
: 브라우저가 초기 렌더링을 시작하기 전에 꼭 기다려야만 하는 최소 리소스로, 초기 화면 출력 지연을 유발한다.
대표적으로 Render Blocking을 유발하는 경우는 아래와 같다.
1. HTML, CSS(리소스) 로 인한 Render Blocking
2. Script Tag의 DOM Parser Blocking에 인한 Render Blocking
3. CSSOM의 script execute Blocking에 의한 Render Bloc
king (스크립트가 CSSOM을 필요로 할 경우)
CSSOM은 script blocking 요소
자바스크립트는 DOM에 새로운 요소를 추가 할 수 있으며, 요소의 스타일을 지정 할 수 있다.
스크립트 실행을 하려는데 CSS의 다운로드와 빌드작업이 완료되지 않았을때는 브라우저가 CSSOM생성 완료시점 까지 Javascript의 실행을 지연시킨다.
CSS는 JS의 실행도 Block하고 Rendering도 Block을 하는 만큼의 중요한 작업이였다..!
render-blocking resources와 parser-blocking resources 차이
- 렌더링 차단: 렌더링이 시작되기 전에 브라우저가 기다려야 하는 리소스
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Hello</p>
</body>style.css가 로드되고 적용되기 전까지 브라우저는 <p>Hello</p>를 그리지 않음
하지만 HTML 파싱은 계속 진행됨 (즉, 렌더링만 잠시 대기하는 상태)
- 파서 차단: HTML 파싱(HTML 택스트 문서를 DOM으로 바꾸는 과정)을 즉시 중단시키는 리소스
<head>
<script src="app.js"></script>
</head>
<body>
<p>Hello</p>
</body>app.js가 로딩되고 실행되기 전에는 <body> 파싱도 멈춤
렌더링 이전에 파싱 자체가 멈추므로, 렌더링까지도 완전히 차단
