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

• 웹 브라우저에서 HTML 문서를 분석하고 표시하는 프로그램을 가리켜 rendering engine이라고 한다.
• rendering engine은 HTML type의 문법을 해석(parse)하고 DOM tree를 구축(build)한 후 HTML 문법으로 작성된 JavaScript 코드를 실행한다.

Rendering engine이 HTML type의 데이터를 해석하는 처리 순서

1. Web Browser에서 Web page를 열면 가장 먼저 window 객체가 생성된다. window 객체는 웹 페이지의 전역 객체로 웹 페이지의 tab마다 생성된다.
2. Document 객체가 window 객체의 property로 생성되며, 웹 페이지를 해석해서 DOM tree의 구축을 시도한다. Document 객체는 readyState property를 가지고 있으며, readyState 의 초깃값은 “loading” 문자열이다.
3. HTML document는 HTML 구문을 작성 순서에 따라 분석하며(ASC, 위에서 아래로) Document 객체 요소와 텍스트 노드를 추가해 나간다.
4. HTML document 안에 script element가 있다면 script element 안에 코드는 Javascript 문법에 따라 구문을 분석한다. 구문을 에러없이 성공적으로 분석(interpret, 해석)해 오류가 발생하지 않음이 확인되면, 코드를 실행한다.
5. 해석 → 2. 코드 실행
6. HTML document의 모든 내용을 분석(interpret, 해석)한 후 DOM 트리 구축을 완료하면, document.readyState 값이 “interactive” 문자열로 변경된다.
7. Web browser는 Document 객체에 DOM tree 구축(build) 완료를 알리기 위해 DOMContentLoaded 이벤트를 발생시킨다.
8. img 등의 요소가 이미지 파일등의 외부 리소스를 읽어들여야 한다면, 이 시점에 읽어들인다. → DomContentLoaded 이벤트 발생 이후
9. 모든 리소스를 읽어들인 이후에는 document.readyState 프로퍼티 값이 “complete” 문자열로 변경된다. 마지막으로 웹 브라우저는 Window 객체를 상대로 load 이벤트를 발생시킨다.
10. 이 시점부터 다양한 이벤트(사용자 정의 이벤트, 네트워크 이벤트)를 수신하며, 이벤트 발생시 이벤트 처리기가 비동기로 호출된다.

requestAnimationFrame() method

Window: cancelAnimationFrame() method

createTextNode() method: https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode