브라우저 렌더링 과정(2) - js파싱 및 실행, 리플로우 및 리페인트

https://parkparkpark.tistory.com/47

브라우저 렌더링 과정(1) - DOM, CSSOM과 렌더 트리

 

자바스크립트 파싱 및 실행

 

HTML 문서를 파싱한 결과물로서 생성된 DOM은 자바스크립트 코드에서 DOM API를 사용하여 동적으로 조작할 수 있다.

 

HTML, CSS를 한 줄씩 순차적으로 파싱하며 DOM를 생성하다가 자바스크립트 파일을 로드하는 코드 나 태그를 만나면 DOM생성을 일시 중단한다. 이후 자바스크립트 엔진에 제어권을 넘긴 후 동적으로 DOM을 조작하며 끝나면 제어권을 다시 렌더링 엔진으로 넘겨 HTML파싱을 재개한다.

 

자바스크립트 엔진에서는 코드를 실행할 때 토크나이징과 파싱이 이루어진다.

 

토크나이징: 단순한 문자열인 자바스크립트 소스코드를 어휘 분석하여 문법적 의미를 갖는 코드의 최소 단위인 토큰들로 분해한다.

 

파싱: 토큰들의 집합을 구문 분석하여 AST(추상적 구문 트리)를 생성한다. AST는 토큰에 문법적 의미와 구조를 반영한 트리 구조의 자료구조이다.

 

파싱의 결과물로 생성된 AST는 인터프리터가 실행할 수 있는 중간 언어인 바이트코드로 변환되고, 실행된다.

 

 

리플로우와 리페인트

 

자바스크립트에서 DOM API를 사용했을 때 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고, 다시 리플로우 및 리페인트한다.(반복 렌더링)

 

 

script 태그를 body요소 가장 아래쪽에 위치시키는 이유

 

1. DOM이 완성되지 않은 상태에서 자바스크립트로 조작하면 에러가 발생할 수 있음

 

2. 자바스크립트 로딩/파싱/실행으로 인해 HTML 요소들의 렌더링에 지장받는 일이 발생하지 않아 페이지 로딩 시간이 단축됨

 

 

script 태그의 async/defer 속성

 

자바스크립트 파싱에 의한 DOM생성이 중단되는 문제를 해결하기 위해 추가된 속성이다.

 

ex) <script async src="index.js"><script>

      <script defer src="index.js"><script>

 

async 속성: HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 실행은 자바스크립트 파일 로드가 완료된 직후 진행되며 이때 HTML파싱은 중지된다.

 

주의할 점: 순서 보장이 필요한 script 태그에는 async 속성을 지정하지 않아야 한다.(로드가 완료된 자바스크립트부터 실행되므로 순서가 보장되지 않음)

 

defer 속성: async와 마찬가지로 외부 자비스크립트 로드와 HTML파싱이 동시에 진행된다. 단 자바스크립트의 파싱과 실행은 HTML파싱이 완료된 직후 진행된다. 즉 DOM생성이 완료된 후 실행되어야 할 자바스크립트에 유용하다.