랜더링 엔진 동작 과정 & 사용자 관점

브라우저가 페이지를 요청하고 해당 페이지를 띄우는 랜더링 동작 과정에 대해 간략히 정리해보려 한다.

랜더링 동작 과정

1. 다운로드
   • 페이지 파일을 다운로드 한다.
   • 랜더링 엔진이 시작되는 부분은 아니다.
2. 파싱
   • 랜더링 엔진의 시작지점
   • 다운로드한 파일(보통 8KB 단위)을 해석하며, DOM, CSSOM 트리를 구성한다.
   • 각 태그에서 리소스가 필요할 경우 다운로드 한다.
3. 스타일
   • DOM, CSSOM 트리를 조합하여 스타일을 매칭시켜 렌더 트리를 구성
4. 레이아웃
   • root부터 노드를 순회하며 각 노드의 정확한 위치와 크기를 계산
   • 계산된 값을 픽셀로 하여 렌더트리에 반영
5. 페인트
   • 렌더트리의 각 노드를 화면상의 실제 픽셀로 변환
   • 변환된 결과를 개별 레이어로 관리
6. 합성, 랜더
   • 각 레이어를 합성하여 스크린 업데이트
   • 화면 확인 가능
   • CPU가 애니메이션을 처리하기 위해 GPU와 통신
7. 레이아웃(리플로우)
   • DOM의 추가/삭제 및 기하적인 영향을 주는 CSS 속성값 변경 시
   • DOM, CSSOM 트리 변경 시 3~6 과정을 다시 진행
8. 리페인트
   • 기하학적 영향을 주지 않는 CSS 속성값 변경시
   • 3~6 과정에서 레이아웃을 스킵
   • 부하가 적다.

번외

• DOMContentLoaded 이벤트: HTML과 CSS 파싱이 끝나는 시점
• load 이벤트: HTML 상에 필요한 모든 리소스가 로드된 시점

사용자 기준 화면 시점

1. FP(First Paint): 화면에 무언가가 처음으로 그려지는 시점
2. FCP(First Contentful Paint): 텍스트나 이미지가 출력되기 시작하는 시점
3. FMP(First Meaningful Paint): 사용자에게 의미 있는 컨텐츠가 그려지기 시작하는 시점
4. TTI(Time to Interactive): js 초기 실행이 완료되어 사용자가 행동을 취할 수 있는 시점

랜더링 차단 리소스

CSS, Script

참고 자료 링크

좋은 글 감사드립니다.

TOAST-UI 블로그
CSS 애니메이션의 성능 아는 만큼 좋아져요!