1. 렌더링 개요

1. 페이지 렌더링에 필요한 필수 리소스

페이지 렌더링에 필요한 필수 리소스는 무엇일까?

브라우저가 페이지를 렌더링하기 위해서는 HTML 문서와 CSS 그리고 JS와 같은 몇 가지 중요한 리소스들을 필요로 함

이처럼 렌더링에 필수적으로 필요한 중요한 리소스들을 Critical resources라고 함

2. 점진적으로 페이지를 렌더링하기, Progressive rendering

네이티브 애플리케이션과 브라우저의 차이는 무엇일까?

일반적인 네이티브 애플리케이션은 설치 후 단순하게 실행되어 동작하지만,

이와는 다르게 브라우저는 전 세계에 분산된 수많은 각 서버들이 제공하는 리소스들을 다운받아 렌더링 해야하는 역할을 수행한다는 특성을 가지고 있음

문제는 이러한 리소스들은 각 서버마다 다양한 방식으로 작성되어 보관되며, 서로 상이한 포맷들(.png, jpg, otf 등)을 가지고 있기 때문에,

브라우저는 어떠한 페이지를 렌더링하더라도 위와 같은 특성들을 고려하여 안정적이고 점진적으로 화면을 렌더링할 수 있도록 설계되었음

3. 적절한 렌더링 시점 정하기

적절한 렌더링 시점은 언제일까?

브라우저는 페이지를 렌더링할 수 있는 리소스들을 확보하면, 렌더링을 시작하려고 시도함

그렇다면 적절한 렌더링 시점은 언제일까?

A. 최대한 빨리 렌더링하기

첫 번째 전략은 리소스를 확보하는대로 렌더링을 최대한 빨리 시작하는 것으로,

CSS나 JavaScript 없이 HTML파일만 가지고 렌더링을 빠르게 시작하게 되면 HTML 레이아웃 자체는 빠르게 렌더링 될 수 있음

하지만 CSS를 통해 스타일을 적용하거나 JavaScript를 통해 이벤트를 추가하는 작업이 페이지가 렌더링된 이후에 수행되게 되면서,

페이지가 다시 새롭게 렌더링되어야할 필요가 생기게 되고, 그 과정에서 화면이 잠시 뒤틀리거나 깜빡이는 상태로 사용자에게 보여질 수 있음
→ UX 저하, 혼란 야기

따라서 렌더링 속도가 조금은 늦더라도, 렌더링에 필수적으로 필요한 리소스들을 추가 확보한 뒤에 더 나은 렌더링을 제공하는 전략이 더 좋을 수 있음

B. 모든 리소스가 준비된 후 렌더링을 시작하기

두 번째 전략은 모든 리소스가 준비된 후 렌더링을 시작하는 것인데,

이렇게 되면 모든 리소스가 준비될 때까지 브라우저가 렌더링을 하나도 수행하지 않고 기다릴 경우, 사용자는 화면을 보기까지 그만큼 더 오래 기다려야함
→ UX 저하

그러나 페이지의 특성에 따라 더 빠른 시점에도 별다른 문제 없이 서비스를 이용할 수 있는 시점도 존재할 수 있기 때문에
(ex. JS를 통한 동적인 제어가 별로 없는 페이지)

모든 리소스가 준비된 후 렌더링을 시작하는 전략은 다소 비효율적일 수 있음

4. 그래서 적절한 렌더링 시점은?

따라서 앞선 두 전략의 이점들만 고려하여 요약하면,
브라우저는 사용자에게 최대한 빨리 렌더링된 화면을 보여주어야 하면서도, 렌더링 과정에서 틀어지거나 깨진 화면을 보여주지도 않아야 함

그렇게 하기 위해서는 렌더링 작업에 꼭 필요하면서도, 최소한으로 필수적인 리소스들이 무엇인지 알아야 함
→ 렌더링에 필수적인 리소스와 그렇지 않은 리소스를 구분해야 한다는 것으로, 그래야 최대한 빠르고 효율적으로 렌더링을 수행할 수 있기 때문

정리하면 적절한 렌더링 시점은,
사용자에게 혼란을 야기하지 않는 선에서 최대한 빨리 렌더링을 수행할 수 있는 시점이라고 볼 수 있음

브라우저는 이러한 시점을 기준으로 초기 렌더링을 수행하도록 동작하며,
이러한 렌더링 단계 혹은 과정을 Critical Rendering Path(CRP)라고 함

5. 요약