🖥️ 웹페이지의 렌더링

📍웹 브라우저의 구조

• User Interface(사용자 인터페이스)
  : 주소표시줄, 이전/다음 새로고침 등 웹페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스
• Rendering Engine
  :HTML 과 CSS를 파싱 하여 요청한 웹페이지를 표시하는 렌더링 엔진
• Browser Engine
  : 유저인터페이스와 렌더링 엔진을 연결하는 브라우저엔진
• Networking
  : 각종 네트워크 요청을 수행하는 네트워킹파트
• UI Backend
  : 체크박스나 버튼과 같은 기본적인 위젯을 그려줌
• Data Persistence
  : localStorage나 Cookie와 같이 보조기억장치에 데이터를 저장하는파트
• JavaScript Interpreter
  : JavaScript를 실행하는 인터프리터

❗️Parsing(파싱)이란?
HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성하는 단계이다.

---

📍 Rendering Engine

- 웹 브라우저마다 사용하는 렌더링 엔진이 다르다!

safari -> Webkit
Firefox -> Gecko
Chrome -> Blink

💡 렌더링 엔진의 목표

1) HTML, CSS, JS, 이미지 등 웹페이지에 포함된 모든 요소들을 화면에 보여준다.

2) 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료 구조를 생성한다.

💡 렌더링 엔진의 동작 과정

Critical Rendering Path

1. 브라우저는 HTML, CSS, JS, 이미지, 폰트 등 리소스를 서버에 요청하고, 응답으로 받아온다.
2. 브라우저 렌더링 엔진은 받아온 HTML, CSS를 파싱해 DOM, CSSOM을 생성하고, 이들을 결합해 렌더 트리를 생성한다.
3. 브라우저 JS 엔진은 받아온 JS를 파싱해 AST를 생성하고, 바이트코드로 변환해 실행한다.
4. 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기)을 계산한다.
5. 화면에 HTML요소를 페인팅한다.

1. 요청과 응답

: 브라우저는 우선 필요한 리소스(HTML, CSS, JS, 이미지, 폰트..)를 서버에 요청하고, 응답으로 받아와야 한다.

2.HTML 파싱, DOM생성

: 응답으로 받아온 HTML 문서를 브라우저가 이해할 수 있는 형태로 바꾸는 작업이 필요한데, 여기서 말하는 형태가 바로 DOM 구조이다.

HTML 문서를 DOM형태로 파싱하기 위해선 다음과 같은 단계를 거친다.

1. 바이트(Bytes) : 서버는 브라우저에게 2진수 형태의 HTML 문서를 응답으로 준다.

2. 문자열(Characters) : 문서는 의 charset 속성에 지정된 방식으로 문자열로 인코딩 된다.(ex. UTF-8) 서버는 이 인코딩 방식은 응답 헤더에 담아준다.

3. 토큰(Tokens) : 문자열 형태의 HTML문서를 '토큰'단위로 분해한다. (문법적 의미를 갖는 코드의 최소 단위)

4. 노드(Nodes) : 각 토큰을 객체로 변환해, 노드를 생성한다. (DOM을 구성하는 기본 요소)

5. DOM : HTML문서의 요소들의 중첩관계를 기반으로 노드들을 트리 구조로 구성한다. 이 트리를 DOM이라고 한다.

위와 같은 과정을 거쳐서 HTML 문서가 파싱되고, DOM 이라는 결과물을 생성하게 된다. 브라우저는 Javascript 언어만 알아듣는데, Javascript는 HTML의 태그나 속성들을 바로 다룰 수 없기 때문에, 다룰 수 있는 형태인 '객체'로 바꿔주어야 한다. 그래야 브라우저도 HTML 문서를 이해할 수 있게 된다.

CSS파일도 마찬가지로 파싱과정을 겪고 CSSOM Tree가 만들어진다.

위과정을 겪어 DOM과 CSSOM이 생성되고 난후 화면에 보여질 렌더트리를 만든다.

렌더트리란 말그대로 브라우저 화면에 렌더링 되기위한 트리로 DOM과 CSSOM을 합쳐 화면에 보여지는 부분만 포함시킨 트리이다.

3. JavaScript Parsing

:렌더링 엔진은 HTML 파일을 한줄씩 파싱하며 DOM을 생성하다가 Javascript 코드들 불러오는 태그를 만날 때도 파싱을 잠시 멈춘다. 그리고나서 src 속성에 적혀있는 파일을 서버에 요청해 받아온다.

이렇게 받아온 js파일도 마찬가지로 파싱을 해야하는데, 이 파싱은 브라우저 렌더링 엔진이 직접하지 않고, Javascript 엔진이 담당하게 된다. 이 때 렌더링 엔진은 JS엔진에게 제어권을 아예 넘겨주기 때문에, HTML 파싱을 멈췄다가 js파싱이 다되면 다시 제어권을 돌려받아 파싱을 다시 시작하는 것이다.

JS엔진은 js파일의 코드를 파싱해서 컴퓨터가 이해할 수 있는 기계어로 변환하고 실행한다. 좀 더 구체적으로 살펴보면, 먼저 단순한 텍스트 문자열인 코드를 토큰 단위로 분해한다. 이렇게 분해된 토큰에 문법적인 의미와 구조가 더해져, AST(추상 구문 트리) 라는 트리가 완성된다.

4. 레이아웃(리플로우)

: 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기)을 계산한다.

브라우저는 각 요소들이 전체 화면에서 어디에, 어떤 크기로 배치되어야 할 지 파악하기 위해 렌더트리의 맨 윗부분부터 아래로 내려가며 계산을 진행한다. 모든 값들은 절대적인 단위인 px값으로 변환된다.

5. 페인팅

: 화면에 HTML요소를 페인팅한다.

브라우저 화면은 픽셀이라고 하는 정말 작은 점들로 이루어져 있다. 각각 정보를 가진 픽셀들이 모여 하나의 이미지, 화면을 구성하는 것이다. 따라서 화면에 색상을 입히고, 어떤 요소를 보여주기 위해서는 이 픽셀에 대한 정보가 있어야 한다. 페인팅은 이러한 픽셀들을 채워나가는 과정이다. 따라서 이 과정을 마지막으로 우리는 단순한 텍스트에 불과했던 파일 내용들을 이미지화된 모습으로 브라우저 화면을 통해 볼 수 있게되는 것이다.

• 리플로우, 리페인트
  리플로우 = 레이아웃 계산을 다시하는 것
  리페인트 = 새로운 렌더트리를 바탕으로 다시 페인트를 하는 것

만약 사용자가 브라우저 화면을 늘리거나 줄이는 등 크기를 조절하거나, 어떤 버튼을 눌러 화면에 요소가 추가되거나 삭제되는 경우가 생기면, 당연히 화면에 있던 요소들의 위치나 크기 등이 바뀌는 일이 생기게 될 것이다. 굉장히 당연하게 여겨지지만, 이렇게 화면에 나타나는 모습을 바꾸기 위해서는 모든 요소들의 위치와 크기를 다시 계산하고, 다시 그려서 보여주어야 한다. 이렇게 어떤 인터랙션으로 인해 앞서 보았던 레이아웃, 페인팅 과정을 반복하는 것을 리플로우, 리페인트라고 한다.

DOM 조작은 리플로우, 리페인팅이 일어나는 대표적인 예시라고 할 수 있다.

---

참고
https://joooing.tistory.com/entry/rendering