브라우저 렌더링과정

1. 파싱: 텍스트 문서의 문자열을 토큰으로 분해하고 parseTree를 생성하는 과정

2. 렌더링: HTML, CSS, JS로 작성된 문서를 파싱해서 브라우저에 시각적으로 출력

 

렌더링과정

주소창에 url 입력 -> 브라우저는 렌더링에 필요한 리소스(html, css, js 등등)들을 서버에 요청

-> 받은 (html, css, js 등) 리소스들을 파싱해서 브라우저가 이해할 수 있는 자료구조 형태로 만든다

 

1. html 파싱을 하면 DOM tree

2. css 파싱을 하면 CSSOM tree

3. js파싱을 하면 AST(Abstract Syntax tree) 

 

렌더트리 = DOM tree + Render tree

렌더트리: 화면에 보이는 모든 노드, 컨텐츠, 스타일 정보를 병합한 최종 출력

 

자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리 HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해서 DOM 생성 프로세스 중지 후 자바스크립트 엔진으로 제거권한을 넘기고 실행이 관료되면 다시 HTML 파서로 제어권한을 넘겨서 브라우저가 중지된 시점부터 DOM 생성을 재개

 

body  가장 아래에 자바스크립트를 넣는 이유

 1. HTML 요소들이 스크립트 로딩지연으로 인해서 렌더링에 지장받는일이 발생하지 않아서 페이지 로딩 단축

 2. DOM 이 완성되지 않은 상태에서 자바스크립트가 DOM 조작한다면 에러발생