[기술면접] 브라우저 렌더링

웹페이지가 브라우저에 렌더링되는 과정을 설명해주세요.

우선 브라우저란 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 해주는 프로그램입니다.
이러한 브라우저는 렌더링 될 때 처음으로 HTML 파일과 CSS 파일을 파싱해서 각각 트리를 만듭니다. 그 후 두 트리를 결합해서 렌더링 트리를 만듭니다. 렌더링 트리에서 각 노드의 위치와 크기를 계산합니다. 계산된 값을 이용해서 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만듭니다. 마지막으로 레이어를 합성하여 실제 화면에 나타냅니다.

Parsing

• 브라우저가 페이지를 렌더링하려면 가장 먼저 받아온 HTML 파일을 해석해야한다. Parsing 단계는 HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성하는 단계이다.

• 파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행한다.

Style

• Style 단계에서는 Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성한다. Render Tree는 실제로 화면에 그려질 Tree이다.

Layout

• Layout 단계에서는 Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산한다.

• 루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영한다. 만약 크기 값을 %로 지정하였다면, Layout 단계에서 % 값을 계산해서 픽셀 단위로 변환한다.

Paint

• Paint 단계에서는 Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다. 이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.

Composite

• Composite 단계에서는 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다. 우리는 화면에서 웹 페이지를 볼 수 있다.