🖥️ 브라우저 렌더링 과정

🌁 Background

브라우저 ?

• 사용자가 입력한(원하는) 웹페이지(url에 의해 정해진), 이미지, 동영상 등의 자원을 서버에게 요청한다.

• 서버로부터 전달(응답) 받은 자원을 화면에 출력한다.

• 인터넷 익스플로러, 크롬, 사파리 등이 이에 해당한다.

  

  프로미스 101이 아닌 브라우저 101
  

브라우저의 구성 요소

---

Component	Description
User Interface	- 사용자가 접근할 수 있는 영역이다. - 예컨데 검색창, 뒤로가기/앞으로 가기 버튼, 새로 고침 버튼 등 브라우저 프로그램 자체의 GUI를 구성하는 부분이다.
Browser Engine	- User Interface와 Rendering Engine 사이의 동작을 제어해주는 엔진이다. - 브라우저라는 프로그램의 비즈니스 로직, 핵심 중추 부분이다. - Data Storage를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 한다.
Rendering Engine	- 요청한 콘텐츠를 화면에 출력하는 역할이다. - HTML, CSS 등을 파싱하여 최종적으로 화면에 그린다.
Networking	- HTTP 요청을 할 수 있으며 네트워크를 호출할 수 있다.
JS Engine	- JavaScript 코드를 해석하고 실행한다.
UI Backend	- 기본적인 위젯을 그리는 인터페이스이다.
Data Storage	- Local Storage, IndexedDB, 쿠키 등 브라우저 메모리를 활용하여 저장하는 영역이다.

렌더링 엔진의 동작 원리

---

이를 크게 두가지로 요약하자면 다음과 같다.

• HTML, CSS, JS, 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 보여준다.
• 업데이트가 필요할 때 효율적으로 렌더링할 수 있도록 자료구조를 생성한다.

1. DOM 트리 구축

1. 브라우저는 서버로부터 HTML 문서를 모두 전달 받는다.
2. 파싱 트리를 기반으로 DOM 요소와 속성 노드를 가지는 DOM 트리를 생성한다.

• 어휘와 구문을 분석하여 HTML 문서를 파싱하고, 파싱 트리를 생성한다. 문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.

  파싱(구문 분석)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정을 말한다.

2. CSSOM(CSS Object Model) 생성

CSS 파싱

• 1️⃣의 DOM을 생성할 때 거쳤던 과정을 그대로 CSS에 반복한다.
• 그 결과로 브라우저가 이해하고 처리할 수 있는 형식으로 변환된다.

3. 렌더 트리(DOM + CSSOM) 생성

• DOM 트리와 CSSOM 트리를 합쳐 렌더 트리(Render Tree)를 구축한다. 렌더 트리는 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하고 있는 트리이다.
  • DOM 트리의 최상단인 document 객체부터 각 노드를 순회하면서 각각에 맞는 CSSOM을 찾아서 규칙을 적용한다. 그러면서 렌더와 관련된 요소들을 렌더 트리에 포함시킨다.
  • 이때, meta 태그나 display: none; 속성을 가진 요소들은 렌더와 관계가 없기 때문에 렌더 트리에 포함되지 않는다.

4. Layout(리플로우)

• 뷰포트 내에서 요소들의 정확한 위치와 크기를 계산하는 과정.
• Display 속성에 따라서 텍스트나 요소의 박스가 화면에서 차지하는 영역이나 여백, 그리고 이외의 스타일 속성이 계산된다. 이 때, CSS에서 %나 em 같은 상대적인 단위를 사용했을 때에는 뷰포트에 맞춰서 픽셀 단위로 변환된다.
• 레이아웃은 사용자의 어떠한 액션이나 이벤트에 의해 DOM 요소의 크기나 위치 등을 변경하면 해당 노드의 하위 노드와 상위 노드들을 포함하여 레이아웃 단계를 다시 수행(리플로우)하게 된다.
  

✅ 리플로우 발생 시점

1. DOM 노드의 변경: 추가, 제거, 업데이트
2. DOM 노드의 노출 속성을 통한 변경: display: none은 리플로우와 리페인트를 발생시키지만, 비슷한 속성인 visibility: hidden은 요소가 차지한 영역을 유지해 레이아웃에 영향을 주지 않으므로 리페인트만 발생시킨다.
3. 스크립트 애니메이션: 애니메이션은 DOM 노드의 이동과 스타일 변경이 짧은 시간 내에 수차례 반복해 발생되는 작업이다.
4. 스타일: 새로운 스타일시트의 추가 등을 통한 스타일 정보 변경 또는 기존 스타일 규칙의 변경
5. 사용자의 액션: 브라우저 크기 변경, 글꼴 크기 변경 등

→ 변경하려는 특정 요소의 위치와 크기뿐만 아니라 연관된 요소들의 위치와 크기도 재계산하여 영향을 주기 때문에 브라우저의 성능을 저하시키는 요인이 될 수 있다. (계산량 high → 비용이 큰 작업)

❗️리플로우를 발생시키는 속성(레이아웃에 영향을 주는 속성들)

position / width / height / margin / padding / display / top / left / right / bottom / box-sizing / border-color / text-align / border / border-width / font-family / float / font-size / font-weight / line-height / vertical-align / white-space / word-wrap / text-overflow / text-shadow ...

5. Paint

위에 Layout 과정에서 렌더링 엔진이 각 요소들이 어떻게 생겼고 이를 어떻게 보여줄 지 알게 된다면 마지막으로 화면에 실제 픽셀로 그려지도록 변환하는 과정을 거치는데, 이것이 바로 Paint 과정이고,

계산이 변경된 요소를 화면에 다시 그려주는 작업을 리페인트라고 한다.

✅ 리페인트 발생 시점

1. 리플로우가 발생했을 때
2. 요소의 스타일(색상, 배경색 등)이 변경되었을 때
3. visibility: hidden ↔ visible로 변경되었을 때

❗️리페인트를 발생시키는 속성(레이아웃에 영향을 주지 않는 속성들)

color / border-style / visibility / background / background-color / background-image / background-position / background-repeat / background-size / text-decoration / outline / outline-style / outline-color / outline-width / border-radius / box-shadow ...