웹브라우저에서 자바스크립트 실행 순서

1. 웹페이지 실행 시 전역 객체인 Window 객체가 생성

2. Document 객체가 Window 객체의 프로퍼티로 생성되며 웹 페이지를 해석해서 DOM 트리를 구축하려고 한다.

3. HTML 문서는 작성 순서에 따라 분석되며 Document 객체 요소와 텍스트 노드가 추가된다.

4. HTML 문서 내부 script 요소 안의 코드나 외부 파일의 코드가 분석된다. 이때 HTML 문서 분석은 일시중지 되고 자바스크립트 코드가 완전히 실행된 후 HTML 문서 분석이 재개된다.

5. HTML 문서의 모든 내용을 읽고 DOM 트리가 구성되면 document.readtState 프로퍼티 값이 interactive로 바뀜.

6. 웹 브라우저는 Document 객체에 DOM 트리 구축 완료를 알리기 위해 DOMCONTENTLOADED 이벤트를 발생시킨다.

7. img 태그 등의 외부 리소스가 이 시점에서 로드된다.

8. 모든 리소스가 로드되면 document.readyState 프로퍼티 값이 complete로 바뀐다. 그리고 웹 브라우저는 Window 객체에 load 이벤트를 발생시킨다.

9. 이후 다양한 이벤트를 수신하며 이벤트가 발생하면 이벤트 핸들러가 비동기적으로 호출된다

 

비동기

작업을 요청한 후 해당 작업이 완료될 때까지 기다리지 않고 다음 작업을 진행하는 방식. 여러 작업이 동시에 실행될 수 있다. 

I/O 작업은 상대적으로 시간이 많이 소요 되는데 비동기 방식을 사용하면 유용하다.