HTML 렌더링 과정

웹 브라우저의 구조

1~4 단계가 모두 부분적이고 비동기적으로 진행되는 프로세스 이다.

1. HTML이 파싱되면서 파싱된 부분이 DOM트리를 구성한다. 동시에 CSS도 파싱되면서 CSSOM트리를 구성한다.

1-2 파싱중 script 태그를 만나면 서버에 그 파일을 요청하고 먼저 실행할 js가 가 있으면 실행한다. 동기적이라 렌더작업이 중단되며 JS engine 작업이 끝나야 다시 렌더작업 실행된다.

2. 1번 이후 DOM트리와 CSSOM 트리를 결할해 렌더트리를 생성한다. (스타일, element 순서 정보)

3. 렌더트리의 노드들이 배치 과정을 거치며 정확한 좌표를 얻게된다.

4. 렌더트리를 순회하며 각 노드들은 paint 메서드를 호출해 UI backend를 함께 사용하여 화면에 그린다.

5. HTML 파일을 읽을 때( alert(1) 가 사용자가 확인 버튼을 누를 때까지 다른 테그들은는 출력 되지 않는다 그래서 보통 script는 body 태그의 끝 한 라인 전후에 위치한다.

렌더 트리