브라우저 렌더링 원리

DevOps 블로그·2022년 3월 21일
0

Q: 홈페이지가 사용자에게 보이는 순서에 대해서 설명하세요.

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 총 6개의 단계를 통해서 이루어 집니다.

1단계는 불러오기 단계 입니다. 로더(Loader)가 서버로부터 전달 받는 리소스 스트림을 읽는 과정 입니다. 읽으면서 어떤 파일인지, 데이터인지 파일을 다운로드를 할 것인지 등 결정합니다.

2단계는 파싱(Phasing) 입니다. 웹 엔진이 가지고 있는 HTML/XML 파서가 문서를 파싱해서 DOM Tree를 만듭니다.
(파싱은 문자열을 의미하는 토큰으로 분해하고, 문법적 의미와 구조를 반영하여 트리형태의 자료구조인 파스 트리를 만드는 과정)

3단계는 렌더링 트리 만들기 입니다. DOM Tree는 내용을 저장하는 트리로 자바스크립트에서 접근하는 DOM 객체를 쓸 때 이용하는 것이고 별도로 그리기 위한 트리가 만들어져야 하는데 그것이 렌더링 트리입니다.

4단계는 css 결정 입니다. css는 선택자에 따라서 적용되는 태그가 다르기 때문에 모든 css 스타일을 분석해 태그에 스타일 규칙이 적용되게 결정 됩니다.

5단계는 레이아웃 입니다. 렌더링 트리에서 위치나 크기를 가지고 있지 않기 때문에 객체들에게 위치와 크기를 정해주는 과정이 레이아웃단계 입니다.

마지막 6단계는 그리기 입니다. 렌더링 트리를 탐색하면서 최종적으로 그리기를 하는 단계 입니다.

🔥 면접용 답변으로 좀 더 요약
브라우저가 서버로부터 리소스를 받아와서 HTML을 파싱하여 DOM을 생성합니다. 그리고 CSS를 파싱하여서 CSSDOM을 만들고 DOM과 CSSDOM을 합쳐서 렌더트리를 만듭니다. 이를가지고 레이아웃을 브라우저에 그려줍니다.

profile
IT 엔지니어를 향해 살아가는, 공부하는 기록들을 모아두고 있습니다.

0개의 댓글