웹 성능중급

브라우저 렌더링 파이프라인 완전 정복

HTML이 화면의 픽셀이 되기까지의 여섯 단계와, 리플로우·임계 렌더링 경로·Core Web Vitals까지 성능의 큰 그림을 잡습니다.

조조민혁·3일 전·18분 분량

섹션 01

브라우저 렌더링 파이프라인

브라우저가 HTML 텍스트를 화면의 픽셀로 바꾸는 과정을 렌더링 파이프라인이라고 합니다. 이 섹션에서는 각 단계가 무엇을 하고, 어디서 성능 비용이 생기는지 살펴봅니다.

브라우저는 크게 여섯 단계를 거칩니다. HTML을 파싱해 DOM을 만들고, CSS로 CSSOM을 만든 뒤 둘을 합쳐 렌더 트리를 구성합니다. 이어서 레이아웃(위치·크기 계산), 페인트(픽셀 채우기), 컴포지팅 순으로 진행됩니다.

HTML이 픽셀이 되기까지의 여섯 단계

참고

이 여섯 단계는 한 번 실행되고 끝나는 것이 아니라, 화면이 바뀔 때마다 일부 또는 전체가 다시 실행됩니다.

섹션 02

화면이 바뀔 때 어떤 단계가 다시 실행되는지에 따라 성능 비용이 크게 달라집니다.

리플로우는 요소의 크기나 위치에 영향을 주는 변경이 있을 때 발생합니다. 리플로우가 일어나면 뒤따르는 페인트·컴포지팅도 함께 다시 실행되므로 가장 비싼 작업에 속합니다.

섹션 03

첫 화면을 최대한 빨리 보여주려면 렌더링을 막는 리소스를 이해해야 합니다.

임계 렌더링 경로를 최소화해야 합니다. 핵심은 렌더링을 막는 리소스를 줄이고, 꼭 필요한 것만 먼저 로드하는 것입니다.

클릭하면 크게 보기

섹션 04

사용자가 체감하는 성능을 수치로 측정하는 지표들입니다.

LCP, CLS, INP 세 가지가 핵심입니다.