브라우저 렌더링 과정
브라우저 환경을 고려하여 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능
그렇기에 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를
어떻게 파싱(해석)하여 렌더링 되는지 과정을 알아야함!
- 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받음
- 서버로부터 응답된 HTML, CSS를 해석하여 DOM,CSSOM을 생성하고 결합하여 렌더트리 생성
- 서버로부터 응답된 JS를 해석하여 AST를 생성하고 바이트코드로 변환하여 실행, 이때 JS는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합
4.렌더 트리를 기반으로 HTML요소의 레이아웃을 계산하고 브라우저 화면에 HTML요소를 페인팅
HTML 파싱과 DOM 생성
→ DOM은 HTML문서를 파싱한 결과물
