브라우저 렌더링의 과정

🌐 브라우저란?

• 우리가 흔히 인터넷에 접속할 때 사용하는 크롬, 사파리, 인터넷 익스플로러 등을 말한다.
• 웹에서 페이지를 ‘찾아서 보여주고’, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램! (MDN 설명)
• 유저가 선택한 자원을 서버로부터 받아와서 렌더링 과정을 통해 유저에게 보여준다! (페이지, 이미지, 비디오 등의 컨텐츠들)

브라우저 렌더링 과정

1. Parsing : HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다.
2. Style : 두 트리를 결합하여 렌더링 트리를 만든다.
3. Layout : 렌더링 트리에서 각 노드의 위치와 크기를 계산한다.
4. Paint : 계산된 값을 이용해 각 노드를 화면 상의 실제 픽셀로 변환하고, 레이어를 만든다.
5. Composite : 레이어를 합성하여 실제 화면에 나타낸다.

Parsing

• 가장 먼저 받아온 HTML 과 CSS 파일을 해석하여 DOM 트리, CSSOM 트리를 만든다!

Style

• 파싱 단계에서 생성된 두 개의 트리를 매칭해서 렌더 트리를 만든다.
• 렌더 트리란 실제 화면에 그려지는 부분이다.
• 예시) visibility : hidden 은 보이지는 않지만 요소 공간을 차지하기 때문에 렌더 트리에 포함이 되지만, display : none 의 경우 공간도 차지하지 않기 때문에 렌더 트리에서 제외된다

Layout

• 위에서 만들어진 렌더 트리를 화면에 어떻게 배치해야 할 지, 노드의 정확한 위치와 크기를 계산한다.
• 만약 크기 값을 %로 지정했다면, 레이아웃 단계에서 픽셀 단위로 변환한다.

Paint

• 레이아웃 단계에서 계산된 값으로 렌더 트리의 각 노드를 화면상의 실제 픽셀로 변환한다.
• 스타일이 복잡할수록 페인트 시간도 늘어난다.(단색보다 그라데이션이 오래 걸린다)

Composite

• 페인트 단계에서 생성된 레이어를 합성하여 화면에 나타낸다.
• 이를 통해 우리는 화면에서 웹 페이지를 볼 수 있다!