자바스크립트 파싱과 실행

예제 코드

 Window load 크게 네 가지의 API가 있다.

 

 1. DOMContentLoaded: HTML 파싱만 완료되면 콜백 함수를 호출 및 실행 가능하다.

 

 2. load: css 및 image 등과 같은 리소스 파일들이 모두 완료된 뒤에 호출 및 실행 가능하다.

 

 3. beforeunload: 파싱이 모두 완료되기 전에 예기치 못한 변수(웹페이지의 초기화 등)가 생길 때 호출 및 실행 가능하다.

 

 4. unload: css 및 image 등과 리소스 파일들을 불러오는데에 실패하였을때 호출 및 실행 가능하다.

 

 렌더링엔진과 자바스크립트 엔진은 병렬적으로 파싱을 실행하지 않고 직렬적으로 수행하는 동기적인(synchronous) 성향을 지닌다.

 즉, script 태그 위치에 의해 블로킹이 발생할 수 있다(종속적이다).

 

 이를 위해 async나 defer 어트리뷰트를 통해 HTML 파싱과 자바스크립트 파일의 로드에 대해 비동기성을 보장한다.

 다만, defer와 같은 경우 자바스크립트의 파싱과 실행은 HTML 파싱이 완료된 직후, 즉 DOM 생성이 완료 된 직후에 진행된다.               DOMContentload 이벤트는 HTML 파싱만 완료되면 되기 때문에(defer와 거의 비슷하게 파싱 완료) 보다 높은 효율을 보장한다. 

 

출력 결과