브라우저의 렌더링 원리

브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링엔진을 사용합니다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP라는 프로세스를 사용하며 다음 단계들로 이루어집니다.
 

1. HTML를 파싱 후, DOM트리를 구축합니다.
2. CSS를 파싱 후, CSSOM트리를 구축합니다.
3. Javascript를 실행합니다.
   • 주의! HTML 중간에 스크립트가 있다면 HTML 파싱이 중단됩니다.
4. DOM과 CSSOM을 조합하여 렌더트리를 구축합니다.
   • 주의! display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않습니다.
5. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산합니다. (Layout 단계)
6. 계산한 위치/크기를 기반으로 화면에 그립니다. (Paint 단계)
   

용어 공부

⚙️ 렌더링엔진

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

⚙️ CRP

• CRP (Critical Rendering Path, 중요 렌더링 경로)는 브라우저가 HTML, CSS, Javascipt를 화면에 픽셀로 변화하는 일련의 단계를 말합니다. CRP는 Document Object Model (DOM), CSS Object Model (CSSOM), 렌더 트리 그리고 레이아웃을 포함합니다.

⚙️ 파싱

• 파싱은 하나의 프로그램을 런타임 환경(예를 들면, 브라우저 내 자바스크립트 엔진)이 실제로 실행할 수 있는 내부 포맷으로 분석하고 변환하는 것을 의미합니다. 즉, 파싱은 문서의 내용을 토큰(token)으로 분석하고, 문법적 의미와 구조를 반영한 파스 트리(parse tree)를 생성하는 과정입니다.

⚙️ DOM

• DOM(Document Object Model)이란? 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미합니다. 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미합니다. 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미합니다. DOM은 HTML과 스크립팅 언어(JavaScript)를 서로 이어주는 역할을 합니다.

⚙️ CSSOM

• CSSOM(CSS Object Model)이란? CSS 내용을 파싱하여 자료를 구조화 한 것을 CSSOM이라고 합니다. 즉 DOM처럼 CSS의 내용을 해석하고 노드를 만들어 트리 구조로 만든 것을 CSSOM이라 합니다.

⚙️ 렌더트리

• 렌더트리(Render Tree)란? 렌더 트리는 CSSOM과 DOM 트리의 결합으로 만들어집니다. 렌더 트리는 웹 페이지에 나타낼 각 요소들의 위치(Layout, 레이아웃)을 계산하는데 사용되고 픽셀을 화면에 렌더링하는 페인트(Paint) 즉 화면에 요소들을 표현하는 프로세스를 위해 존재합니다.

⚙️ Layout

• Layout(Reflow)이란? 뷰포트 내에서 노드의 정확한 위치와 크기를 계산합니다. 이것이 바로 'Layout' 단계이며 경우에 따라 'Reflow' 라고도 합니다.

⚙️ Paint

• Paint란? 노드와 해당 노드의 계산된 스타일 및 기하학적 형태에 대해 파악했으므로, 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계에 이러한 정보를 전달합니다. 이 단계를 흔히 '페인팅' 또는 '래스터화'라고 합니다.

---

실제로 크롬 개발자 도구를 이용해 다음 코드를 어떻게 렌더링 하는지 살펴보았다.

 
위 로그를 보면 알 수 있는 것처럼 위에서 언급한 CRP가 진행된다.

1. Parse HTML을 통해 HTML 파싱 후, DOM 트리 구축
2. Parse Stylesheet를 통해 CSS 파싱 후, CSSOM 트리 구축
3. Evaluate Script를 통해 Javascript 실행
4. 렌더트리 구축
5. Layout을 통해 뷰포트 기준으로 렌더트리 노드들의 각 크기/위치 계산
6. Paint를 통해 Layout에서 계산한 값들로 각 요소를 화면에 그림

---

 

❓❔ 자바스크립트는 어떻게 HTML 태그들을 조종할 수 있는 걸까?

 

- Document라는 전역 객체를 통해 접근
- window라는 객체는 document객체의 상위에 위치
 

🙄❕❓ 가상 돔 (Virtual DOM )이 나오게 된 이유 

DOM은 느린가?

요즘 흔히 접하는 큰 규모의 웹 애플리케이션(트위터,페이스북)은 스크롤바를 내릴 수록 수많은 데이터가 로딩됩니다.
그리고 각 데이터를 표현하는 요소들이 있습니다.
요소 개수가 몇 백 개, 몇 천 개 단위로 많은 규모가 큰 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주다 보면
성능 이슈가 조금씩 발생하기 시작합니다.
즉 느려진다는 말인데요. 이것이 정확한 말은 아닙니다.
DOM자체는 빨라요.  읽고 쓸 때의 성능은 자바스크립트 객체를 처리 할 때의 성능과 비교하여 다르지 않습니다.
 
단, 웹브라우저 단에서 DOM 변화가 일어나면 웹브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리 페인트 즉 렌더링이 일어 나는 이 과정에서 시간이 허비되는 것입니다.
 
그리고 이 렌더링 과정은 상황에 따라 여러번 반복하여 발생할 수 있고,
돔이 추가,삭제 혹은 태그 위치가 변하는 경우 렌더링이 일어납니다.

렌더링 : 브라우저 로딩 과정 중 스타일 이후의 과정(스타일-> 레이아웃 -> 페인트 -> 합성)을 렌더링이라고 한다.

결론 

속도적인 부분과 많은 일을 수행하다 버그가 발생하거나 브라우저가 죽는 일 등등의 일을 개선하고자
가상돔(Virtual DOM)이 나왔습니다.
 
 
 
귀중한 자료 감사합니다...
 

 

---

 
https://dev-cini.tistory.com/10

[React]  DOM이란? 가상 돔 (Virtual DOM )이 나오게 된 이유

 
https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-5/browser-rendering.md

Frontend-Interview-Questions/Notes/important-5/browser-rendering.md at main · Esoolgnah/Frontend-Interview-Questions

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/browser-rendering.md

Must-Know-About-Frontend/Notes/frontend/browser-rendering.md at main · baeharam/Must-Know-About-Frontend

 
https://developer.mozilla.org/ko/docs/Web/Performance/Critical_rendering_path

중요 렌더링 경로 - 웹 성능 | MDN