1. 브라우저 로딩 과정
파싱 - 렌더트리 형성 - 레이아웃 - 페인트 과정을 거친다. 그 후에 자바스크립트나 CSS를 통해 DOM이나 CSS에 변화가 생길 경우 repaint의 과정을 거친다.
(1) 파싱 : 브라우저의 렌더링 엔진이 HTML과 CSS을 파싱하고 읽어들이는 과정이다.
(1)-1 DOM 트리를 형성한다.
DOM 트리는 문서노드(document), 요소노드(html, body, head, ul, script 등), 텍스트노드(“Apple”, “Banana” 등), 어트리뷰트노드(id=”apple”, src=”app.js”)로 구성된다.
(참고)
-텍스트노드는 DOM 트리의 최종단이다. 따라서 텍스트 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야 한다.
-HTMl의 구조나 내용 또는 스타일 등을 동적으로 조작하려면먼저 요소 노드를 취득해야 한다. 텍스트 노드는 요소 노드의 자식이고, 어트리뷰트 노드는 요소 노드와 연결되어 있기 때문에 텍스트 노드나 어트리뷰트 노드를 조작하고자 할때도 마찬가지다.
(1)-2 CSSOM 트리를 형성한다.
(2) 렌더트리
DOM 트리 + CSSOM 트리를 합쳐서 렌더 트리를 형성한다. 렌더 트리에는 페이지를 렌더링 하는데 필요한 노드만 포함된다. 즉, 렌더링 출력에 반영되지 않는 일부 노드(스트립트 태그, 메타 태그 등)는 생략된다. 일부 CSS 노드(display:none 등)도 렌더 트리에서 생략된다.
(3) 레이아웃
기기의 뷰포트 내에서 노드의 정확한 위치와 크기를 파악하고, 이를 픽셀 값으로 렌더 트리에 반영한다.
(4) 페인트
렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 단계이다. 위치와 관계없는 CSS 속성(background-color, opacity 등)을 적용한다.
2. Virtual DOM
DOM(Document Object Model)은 어플리케이션의 UI(접근을 위한 매개체)인 HTML의 각 요소(li. head 등의 태그)들을 트리 구조로 나타낸 것이다.
DOM은 트리구조로 되어있어서 이해하기 쉽지만, 이러한 구조의 거대한 DOM 트리는 속도 이슈가 발생한다. 트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신되기 때문이다. (즉, 화면에서 10개의 수정사항이 발생하면, 수정할 때마다 새로운 렌더 트리가 10번 수정되면서 새롭게 만들어지게 된다.) 따라서 이러한 불필요한 렌더링을 해결하기 위한 것이 Virtual DOM이다.
Virtual DOM은 실제 DOM 문서를 추상화한 개념으로, 변화가 많은 View를 실제 DOM에서 직접 처리하는 방식이 아닌, Virtual DOM + 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화하는 개념이다. 리액트, 뷰, 앵귤러 등의 프런트앤드 프레임워크들이 Virtual DOM을 활용한다. 이러한 프레임워크들은 화면에 변화가 있을 때마다 실시간으로 돔 트리를 수정하지 않고 변경사항이 모두 반영된 가상 돔을 만들어낸다. 그 후 가상 돔을 이용해 한 번만 돔 수정을 하게 되고 이는 한번만 렌더 트리를 만들어낸다.
html 코드
<div>
2 <div id="header">
3 <h1>Hello, {{state.subject}}!</h1>
4 <p>How are you today?</p>
5 </div>
6</div>virtual DOM
{
2 tag: 'div',
3 children: [
4 {
5 tag: 'div',
6 attributes: {
7 id: 'header'
8 },
9 children: [
10 {
11 tag: 'h1',
12 children: 'Hello, World!'
13 },
14 {
15 tag: 'p',
16 children: 'How are you today?'
17 }
18 ]
19 }
20 ]
21}state is changed, state.subject is changed to ‘Mom'.
{
2 tag: 'div',
3 children: [
4 {
5 tag: 'div',
6 attributes: {
7 id: 'header'
8 },
9 children: [
10 {
11 tag: 'h1',
12 children: 'Hello, Mom!'
13 },
14 {
15 tag: 'p',
16 children: 'How are you today?'
17 }
18 ]
19 }
20 ]
21}h1 태그만 바뀐 것을 인지한다. 따라서 모든 것을 실행하는 것이 아니라 하나의 요소만 업데이트 하면 된다.
*참고
https://www.pluralsight.com/guides/virtual-dom-explained
