38장 브라우저 렌더링 과정

[sbyeol3]

1. 브라우저는 렌더링에 필요한 리소스(HTML, CSS, JS...)를 요청하고 서버로부터 응답을 받는다
2. 렌더링 엔진은 HTML과 CSS를 파싱하여 DOM, CSSOM을 생성하고 이들을 결합하여 렌더 트리 생성
3. 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행
4. 렌더트리를 기반으로 HTML 레이아웃을 계산하고 페인팅

• 렌더링 엔진은 DOM을 생성해 나가다가 CSS를 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단하고 CSS를 파싱한다.
• 렌더트리는 렌더링을 위한 트리 구조의 자료 구조로 브라우저 화면에 렌더링되지 않거나 CSS에 의해 비표시되는 노드들은 포함하지 않는다.

script 태그의 async/defer 어트리뷰트

• 자바스크립트 파싱에 의한 블로킹 문제를 근본적으로 해결하고자 추가된 어트리뷰트
• 외부 자바스크립트 파일을 로드하는 경우에만 사용 가능함
• async: html 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행, 자바스크립트의 파싱과 실행은 로드가 완료된 직후 진행되며 이때 html 파싱은 중단
  • 순서는 보장하지 않음
• defer: html 파싱과 외부 자바스크립트 파일 로드가 비동기적으로 동시에 진행되나 자바스크립트의 파싱과 실행은 dom 생성이 완료된 직후 진행