브라우저가 HTML 을 전달받으면, 브라우저의 render engine이 이를 파싱하고 DOM 노드로 이뤄진 트리를 만든다. 각 노드는 각 HTML 엘리먼트들과 연관되어있다.
- CSS
외부 CSS 파일과 각 엘리먼트의 inline 스타일을 파싱한다. 스타일 정보를 사용해 DOM 트리에 따라 새로운 트리인 렌더트리를 만든다.
- attachment
Webkit 에서는 노드의 스타일을 처리하는 과정을 ‘attachment’ 라고 부른다. DOM 트리의 모든 노드들은 ‘attach’ 라는 메소드가 있는데 이 메소드는 스타일 정보를 계산해서 객체 형태로 반환한다. 이 과정은 동기적 작업이며 DOM 트리에 새로운 노드가 추가되면 그 노드의 attach 메소드가 실행된다. 렌더 트리를 만드는 과정에서 각 요소들의 스타일이 계산되고, 이 계산되는 과정에서 다른 요소들의 스타일 속성들을 참조한다.
- painting
렌더 트리가 다 만들어지고 나면, 레이아웃 과정을 거친다. 각 노드들은 스크린의 좌표가 주어지고, 정확히 어디에 나타나야 할 지 위치가 주어진다. 그 다음 작업은 렌더링 된 요소들에 색을 입히는 과정이다. 트리의 각 노드들을 거쳐가면서 paint() 메소드를 호출한다.
Virtual DOM
이렇듯 DOM에 변화가 생기면, 렌더트리를 재생성하고 레이아웃을 만들고 페인팅을 하는 과정이 다시 반복된다.
Virtual DOM은 만약에 뷰에 변화가 있다면, 그 변화는 실제 DOM 에 적용되기 전에 가상의 DOM에 먼저 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달해준다.
