브라우저의 렌더링 과정

기존 블로그에 작성한 내용을 velog로 이전한 글입니다

1. 랜더링이란

HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다.

2. 랜더링 과정

2.1. 요청과 응답

1. 주소창에 URL 입력

2. 서버에서 주소/index.html 응답

3. HTML 파싱 시작, HTML DOM 생성

   

4. link, style 태그 만날경우 HTML DOM생성 중단 후 CSSOM 생성 or Javascript 실행

   

5. 랜더 트리 생성

   

6. 페인팅

   

2.2. 페인팅이 다시 실행되는 조건

• 자바스크립트에 의한 노드 추가 또는 삭제

• 브라우저 윈도우의 리사이징에 의한 Viewport 크기 변경

• HTML 요소의 레이아웃(위치, 크기)에 변경을 발생시키는 width/height, margin, padding, border, display, position, top/right/bottom/left 등의 스타일 변경

3. 리플로우와 리페인트

자바스크립트에서 DOM이나 CSSOM을 변경하면 변경된 DOM과 CSSOM을 적용하기 위해 리플로우와 리페인트 작업을 진행한다.

• 리플로우: 레이아웃 계산을 다시 하는 것

• 리페인트: 새로 재결합된 렌더 트리를 다시 페인트 하는것.

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

4.1. aysnc 어트리뷰트

HTML파싱과 자바스크립트 로드가 동시에 진행됨.

자바스크립트 파싱과 실행은 자바스크립트 로드가 완료된 직후 시작.

4.2. defer 어트리뷰트

HTML파싱과 자바스크립트 로드가 동시에 진행됨.

자바스크립트 파싱과 실행은 HTML 파싱이 완료된 직후 시작. (DOM 완성 후)