브라우저 렌더링 과정

브라우저 렌더링 과정

브라우저

브라우저는 우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox, Internet Explorer 등을 말한다. 브라우저는 유저가 선택한 자원을 서버로 부터 받아와서 유저에게 보여준다. 이 자원에는 기본 페이지, 이미지, 비디오 등의 컨텐츠들도 포함이 된다. 이 자원들을 렌더링과정을 통해서 유저에게 보여준다.

브라우저의 렌더링 과정

1.html, css 파일을 파싱해서 각각 tree를 만든다.
2. 두 tree를 결합하여 Rending Tree를 만든다.
3. Rendering Tree에서 각 노드의 위치와 크기를 계산한다.
4. 계산 된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든다.
5. 레이어를 합성하여 나타낸다.

parsing

parsing은 브라우저가 블러온 html, css파일을 렌더링하기 위해서 파일들을 해석하고 DOM Tree를 구성하는 단계이다.

style

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

layout

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

paint

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

composite

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