js 브라우저 렌더링과정

브라우저 렌더링 과정

1. HTML, CSS, JS, Asset(이미지, 폰트) 등을 Server에 요청한다.
2. 서버에서 받은 응답의 HTML CSS를 파싱한다. (link 태그를 만나면 HTML 파싱을 중단하고 CSS 파싱)
3. DOM, CSSOM 을 생성한다. ( 바이트 > 문자 > 토큰 > 노드 > DOM 생성. Meta 태그의 Charset 인코딩을 기준으로 변환한다.)
4. 렌더트리를 생성한다. 브라우저 화면에 렌더링되지 않는 노드는 포함되지 않는다.
5. 페인팅한다.

* DOM(Document object Model)은 HTML 문서를 파싱한 결과물이다.
* 파싱 : text문서를 읽어 문자열을 token으로 분해, 문법적 의미와 구조를 반영하여 파스트리 생성
* HTML을 파싱하다가 script를 만나면, 자바스크립트 코드를 파싱하기위해 JS엔진에 제어권을 넘긴다. 이후 JS 파싱이 종료되면, 다시 HTML을 파싱한다.

 

렌더링 과정이 반복되는 경우 (리플로우, 리페인트)

1. JS에 의한 노드 추가 및 삭제
2. 브라우저 리사이징에 의한 뷰포트 크기 변경
3. HTML 요소의 레이아웃 및 스타일 변경

 

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

* 직렬적(순차적)으로 파싱하기때문에 script 코드는 body의 맨 밑에 위치하는것이 좋다.
= 요소가 없는데 JS로 변경 시도 시 에러를 방지할수있음.

async/defer 어트리뷰트는 src를 통해 외부 스크립트 파일을 로드할 경우 사용할 수 있다. 비동기적으로 동시에 실행된다.

<script async src="text.js"/>
<script defer src="text.js"/>

async : JS파일 로드가 완료된 직후에 파싱과 실행되고, 이때 HTML은 파싱이 중단된다.
여러개의 async 어트리뷰트를 지정하면 실행 순서가 보장 되지 않는다.

defer : HTML 파싱이 완료된 직후, 즉 DOM 생성이 된 직후에 진행된다. (그런데 바디 바로 위에 스크립트 태그를 두면 이게 의미가??)