📖 Reference

📎https://d2.naver.com/helloworld/59361 📎https://velog.io/@zaman17/기술면접대비-브라우저-렌더링-순서와-원리

---

[사전지식]

• 브라우저가 하는일은? (렌더링 측면에서)

→ 사용자가 선택한 자원 을 서버에 요청하고 브라우저에 표시하는 것

→ 이때, 자원 은 HTML문서, PDF, 이미지 등 다양한 형태를 가질 수 있으며 자원 의 주소는 URL(Uniform Resource Identifier)에 의해 정해진다.

• 렌더링(Rendering)이란?

→서버로부터 HTML, CSS, JavaScript등 작성한 파일을 받아 브라우저에 뿌려주는 것.

---

🎨렌더링(Rendering)순서

1. 불러오기 : 로더(Loader)가 서버로부터 전달받은 리소스 스트림 을 읽는 과정

2. DOM, CSSOM 생성 : 웹 엔진의 HTML/XML Parser가 문서를 파싱해 DOM 트리를, CSS Parser가 CSSOM 트리를 생성한다.

3. 생성된 DOM과 CSSOM으로 렌더링 트리(Render Tree) 생성 : 생성된 DOM 트리와 CSSOM 트리 중 렌더링에 필요한 노드만 선택하여 페이지를 렌더링하는데 사용한다.

4. CSS, Layout

• Render tree 를 기반으로 그려질 노드 와 스타일 , 크기 를 계산한다.
• 이때, Render tree 에서 위치, 크기 등을 알 수 없기에 객체들에게 위치와 크기를 해당 단계에서 정해준다.
• CSS는 선택자 에 따라서 적용되는 태그가 다르기 때문에 모든 CSS 스타일을 분석해 태그에 스타일 규칙이 적용되도록 결정한다.

5. 그리기(Paint)

: Render tree 의 각 노드를 실제 픽셀로 변환한다.

→ 즉, 실제로 화면에 그리는 작섭을 수행한다.

JavaScript가 DOM, CSSOM을 변경하는 경우 Re-Rendering 이 이루어진다.

리플로우(Reflow) : 레이아웃 계산을 다시 수행하는 것을 말한다.

리페인트(Repaint) : 재결합된 Render tree 를 기반으로 다시 Paint 를 진행하는 것을 말한다.

---

🌐브라우저의 기본 구조

1. 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분

2. 브라우저 엔진 : 사용자 인터페이스 와 렌더링 엔진 사이 동작을 제어

3. 렌더링 엔진 : 요청한 콘텐츠를 표시한다. (ex, HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시한다.)

4. 통신 : HTTP 요청과 같은 네트워크 호출에 사용. (플랫폼 독립적인 인터페이스. 각 플랫폼 하부에서 실행된다.)

5. UI 백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그린다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용한다.

6. JavaScript 해석기 : JS 코드를 해석하고 실행한다.

7. 자료 저장소 : 자료를 저장하는 계층을 말한다.

• 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다.
• HTML5 명세에는 브라우저가 지원하는 웹 데이터 베이스 가 정의되어 있다.

---

🚂 렌더링 엔진의 동작 과정

1. DOM 트리 구축을 위한 HTML 파싱 : HTML 문서를 파싱한다.
2. 렌더 트리 구축 : 콘텐츠 트리 내부에서 태그를 DOM노드로 변환한다.
3. 렌더 트리 배치 : 외부 CSS 파일 및 함께 포함된 스타일 요소를 파싱한다.
4. 렌더 트리 그리기 : 스타일 정보와 HTML 표시 규칙으로 Render tree 라 부르는 트리를 생성한다.