환경
대부분의 프로그래밍 언어는 운영 체제 위에서 실행되지만 웹 애플리케이션의 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다.
웹 브라우저는 어떻게 동작하는가?
브라우저의 핵심 기능은 사용자가 참조하고자 한느 웹 페이지를 서버에 Request하고 서버의 Response를 받아 브라우저에 표시하는 것이다.
브라우저는 서버로부터 HTML, CSS, 자바스크립트, 이미지 파일 등을 응답 받는다.
HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다.
이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를 보여준다.
HTML, CSS는 렌더링 엔진에 의해 처리되지만 자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진에 의해 처리된다.
HTML파서는 script 태그를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘겨 자바스크립트 코드를 실행하게 한다.
자바스크립트 엔진은 제어 권한을 받아 script 태그 내 자바스크립트 코드 또는 script 태그의 src 속성에 정의된 자바스크립트 파일을 로드하고 파싱하여 실행한다.
대부분의 모던 브라우저에서 사용되는 인터프리터는 전통적인 컴파일 언어처럼 명시적인 컴파일 단계를 거치지는 않지만 일부 소스 코드를 컴파일하여 실행한다.
이를 통하여 인터프리터 언어의 장점인 동적 기능 지원을 유지하며 실행 속도가 느리다는 단점을 극복한다.
자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한이 넘어가며 브라우저는 중지했던 지점부터 DOM 생성을 재개한다.
즉, 브라우저의 HTML, CSS, 자바스크립트의 처리는 동기(Synchronous)적으로 처리하며 이는 script의 태그 위치에 따라 블로킹이 발생할 수 있음을 의미한다.
그렇기 때문에 script 태그의 위치는 중요하다.
자바스크립트가 실행될 때에는 이미 HTML 파서가 HTML 요소를 모두 파싱하여 DOM 객체를 생성한 이후라면 큰 문제가 없지만 그 이전이라면 DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작하는 에러가 발생할 수 있다.