Browser’s Rendering process

Browser

• Chrome, Safari, Firefox, Internet Explorer 등
• 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램
• 페이지 외에도 이미지, 비디오 등의 컨텐츠들을 렌더링 과정을 통해 보여줌

Rendering

• HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정

Browser Rendering

• 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다
  - 크롬은 블링크(Blink), 사파리는 웹킷(Webkit) 그리고 파이어폭스는 게코(Gecko)

Browser’s Rendering process

• 사용자가 브라우저를 통해 웹 사이트에 접속하면, 서버로 부터 HTML, CSS 등 웹 사이트에 필요한 리소스를 다운로드 받고

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

Parsing

• 브라우저가 페이지를 렌더링하려면 가장 먼저 받아온 HTML 파일을 해석
• HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성
• HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성
  

Style

• DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성
  ex) Render Tree를 구성할때 visibility: hidden은 요소가 공간을 차지하고, 보이지만 않기 때문에 Render Tree에 포함이 되지만, display: none 의 경우 Render Tree에서 제외
  

Layout

• Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산
• 루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영
  ex) 만약 크기 값을 %로 지정하였다면, Layout 단계에서 % 값을 계산해서 픽셀 단위로 변환
  

Paint

• 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환
• 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리
• 페인팅 또는 래스터화 라고 함

Composite

• Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타냄
• 화면에서 웹페이지를 볼 수 있음

++ 그리고

Reflow - Repaint

• Reflow
  렌더링 과정을 거처 화면에 모든 요소가 그려짐
  -> 사용자가 액션 수행
  -> 이벤트 발생
  -> 새로운 HTML 요소 추가 or 스타일 변경 발생
  -> 변경을 통해 영향을 받는 모든 노드에 대해 렌더링 트리 생성과 레이아웃 과정을 다시 수행

• Repainting
  리플로우의 결과를 화면에 그려지기위해서 다시 painting과정 필요

• 기존 요소에 변경 사항이 생겼다고 해서 항상 리플로우(Reflow)-리페인트(Repaint)가 일어나는 것은 아님
  -> 레이아웃에 영향이 미치지 않는 단순한 색상 변경 같은 변경사항은 리플로우(Reflow) 수행 없이 바로 리페인트(Repaint)만 수행하게 됨
  but 리플로우가 일어나면 반드시 리페인트가 일어남

• 리플로우(Reflow)가 일어나는 대표적인 속성들
  position, width, height, margin, padding, border, border-width, font-size, font-weight, line-height, text-align, overflow
  

• 리페인트(Repaint)만 일어나는 대표적인 속성들
  background, color, text-decoration, border-style, border-radius
  

참고
| https://medium.com/%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98%ED%92%88%EA%B2%A9/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95-5c01c4158ce

| https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/