웹에서 브라우저의 Critical Rendering Path(주요 렌더링 경로)의 올바른 순서는?

Q: 웹에서 브라우저의 Critical Rendering Path(주요 렌더링 경로)의 올바른 순서는?

HTML 파싱 → DOM 생성 → CSSOM 생성 → 렌더 트리 구성 → 레이아웃 → 페인트 브라우저는 HTML을 파싱하여 DOM 트리를, CSS를 파싱하여 CSSOM 트리를 생성합니다. 두 트리를 결합한 렌더 트리에서 각 요소의 위치와 크기를 계산(Layout)하고, 화면에 픽셀로 그립니다(Paint). 이 경로를 최적화하면 FCP(First Contentful Paint)가 빨라집니다.

보통 MDN Web Docs

보기 및 정답

A HTML 파싱 → DOM 생성 → CSSOM 생성 → 렌더 트리 구성 → 레이아웃 → 페인트

B JavaScript 실행 → CSS 로딩 → HTML 파싱 → 화면 표시

C 이미지 다운로드 → HTML 파싱 → CSSOM 생성 → CSS 적용 → 렌더 트리 구성 → 화면 표시

D 서버 응답 수신 → 브라우저 캐시 확인 → DOM 트리 생성 → JavaScript 실행 → 화면 표시

해설

브라우저는 HTML을 파싱하여 DOM 트리를, CSS를 파싱하여 CSSOM 트리를 생성합니다. 두 트리를 결합한 렌더 트리에서 각 요소의 위치와 크기를 계산(Layout)하고, 화면에 픽셀로 그립니다(Paint). 이 경로를 최적화하면 FCP(First Contentful Paint)가 빨라집니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

웹에서 브라우저의 Critical Rendering Path(주요 렌더링 경로)의 올바른 순서는?

해설

코딩, 제대로 배우고 싶다면?

관련 문제

시장과 사람의 답을 봤다면,다음 결과물의 구조를 고릅니다.

시장과 사람의 답을 봤다면,
다음 결과물의 구조를 고릅니다.