[Extra] Rendering

1. Rendering(렌더링)이란 

- 화면에 컨텐츠를 그리는 과정

2. 브라우져 별 렌더링 엔진

- 크롬, 사파리 : Webkit 엔진

- 파이어 폭스 : Gecko 엔진

3. 렌더링 순서

브라우져마다 기본적으로 아래와 같은 순서로 진행됨

(출처:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)

1. DOM 트리 구축을 위한 HTML을 파싱

2. Content Tree에서 태그를 DOM노드로 변환, 외부 CSS파일과 함께 포함된 스타일 요소들도 파싱 (style struct 생성)

3. 1,2번으로 Render Tree 생성

4. Render Tree를 새롭게 재정립함 (Reflow!!)

5. Render Tree 재배치 (Layout) (각 DOM노드가 정확한 위치에 표시되어야함)

6. Render Tree가 구성되고나면 브라우져에 그리기 시작함 (Repaint!!)

7. 페이지 기능에 따라 Reflow, Repaint추가 발생

* 점진적으로 수행함 (즉 1번이 모두 끝날때 까지 기다리지 않고 파싱되는대로 다음 단계 수행)

* Table의 경우 점진적 렌더링 불가 (table-layout:fixed일 경우에는 가능)