브라우저 동작 원리
1. 요청(Request)과 응답(Response)
- 사용자가 참조하고자 하는 웹페이지 서버에 요청
- 서버는 사용자에게 HTML, CSS, JavaScript, 이미지 파일등을 응답
2. HTML, CSS Parser
- 서버로부터 받은 HTML, CSS 파일을 HTML파서와 CSS파서가 파싱
- 파싱 과정에서 최대 20개의 중첩만 허용하고 나머지는 무시
- 파싱된 HTML을 DOM 노드로 변환
- CSS파서는 선택자, 선언을 파싱
- 각각 DOM, CSSOM 트리로 변환
- 두 트리가 렌더 트리로 결합
- 렌더 트리 배치
3. JavaScript 엔진
- HTML 파서가 Script태그에 접근하면 DOM생성 프로세스를 중지하고 자바스크립트 엔진에 제어 권한 넘김
- 자바스크립트 엔진은 스크립트 파일을 파싱하고 실행함
- 스크립트 파일 실행이 완료되면 HTML 파서로 다시 권한을 넘겨 DOM 생성을 재개
4. 그리기
- 다시 권한을 가진 HTML파서가 DOM트리를 완성하고
- 렌더트리로 병합 후 배치
- 그리기를 통해서 브라우저에 표시