브라우저의 렌더링 과정에서 올바른 순서는?

Q: 브라우저의 렌더링 과정에서 올바른 순서는?

DOM 생성 → CSSOM 생성 → 렌더 트리 구축 → 레이아웃 → 페인트 브라우저는 HTML을 파싱하여 DOM 트리를, CSS를 파싱하여 CSSOM 트리를 만듭니다. 두 트리를 합쳐 렌더 트리를 구축한 후, 각 요소의 위치와 크기를 계산하는 레이아웃(리플로우) 단계를 거치고, 최종적으로 화면에 픽셀을 그리는 페인트 단계를 수행합니다.

어려움 MDN Web Docs

보기 및 정답

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

B 페인트 → 레이아웃 계산 → DOM 트리 생성 → CSSOM 생성 → 렌더 트리 구축

C CSSOM 생성 → 페인트 → DOM 생성 → 레이아웃 → 렌더 트리

D 렌더 트리 → DOM 생성 → 레이아웃 → CSSOM 생성 → 페인트

해설

브라우저는 HTML을 파싱하여 DOM 트리를, CSS를 파싱하여 CSSOM 트리를 만듭니다. 두 트리를 합쳐 렌더 트리를 구축한 후, 각 요소의 위치와 크기를 계산하는 레이아웃(리플로우) 단계를 거치고, 최종적으로 화면에 픽셀을 그리는 페인트 단계를 수행합니다.

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

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

정규반 살펴보기

브라우저의 렌더링 과정에서 올바른 순서는?

해설

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

관련 문제

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

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