🗣️ "웹 브라우저가 웹 페이지를 렌더링 하는 과정을 설명해보세요"

🗣️ "웹 브라우저가 웹 페이지를 렌더링 하는 과정을 설명해보세요"

 

저라면 크리티컬 랜더링 패스를 가져와서 설명할 것 같습니다.

크리티컬 랜더링 패스(Critical Rendering Path)?

페이지의 콘텐츠가 사용자에게 빠르게 표시되도록 하는데 중요한 렌더링 프로세스를 설명하는 개념입니다. 이 패스는 페이지가 화면에 렌더링되는 과정을 최적화하여 사용자가 페이지를 더 빨리 볼 수 있도록 합니다.

 

답변:

웹 브라우저가 웹 페이지를 렌더링하는 과정은 크리티컬 랜더링 패스를 기준으로 설명할 수 있습니다. 과정을 설명드리겠습니다.

먼저 페이지를 요청합니다. 사용자가 웹 페이지를 요청하면 브라우저는 서버에 요청을 보내고 HTML 문서를 받아옵니다.

그리고 HTML파싱이 진행됩니다. 브라우저는 이 HTML문서를 읽어서 DOM 트리를 생성합니다. 이 트리에는 페이지의 구조와 콘텐츠가 들어갑니다.

차례로 CSS를 파싱합니다. HTML과 함께 로드된 CSS 파일을 파싱하여 CSSOM트리를 생성합니다. 여기에는 각 요소에 적용될 스타일 정보가 들어가 있습니다.

이후 랜더트리를 생성합니다. 랜더트리는 DOM과 CSSOM이 결합된 트리로 실제 화면에 보여질 요소들만 포함됩니다.

이후 레이아웃을 계산하고 화면에 출력되어 화면이 구성됩니다.