브라우저의 동작 원리

대부분 프로그래밍 언어는 OS에서 실행 되지만 웹어플리케이션의 자바스크립트는 브라우저에서 html, css와 함께 실행된다.

 

브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 request하고 server의 response를 받아 브라우저에 표시하는 것이다.

브라우저는 서버로부터 html, css ,javascript, image file등을 response받는다. html, css 파일은 렌더링 엔진의

html parser와  css parser에 의해 parsing되어 DOM, CSSOM tree로 transform되고 render tree로 combine된다.

이렇게 생성된 render tree를 기반으로 브라우저는 웹페이지를 표시한다.

자바스크립트는 렌더링 엔진ㄴ이 아닌 자바스크립트 엔진이 처리한다.

html parser는 script tag를 만나면 자바스크립트 코드를 실행 하기 위해 DOM생성 프로세스를 중지하고

자바스크립트 엔진으로 제어 권한을 넘긴다.

이때 자바스크립트 엔진은 script tag 내의 javascript code or script tag's src attribute에 define된 javascript file을 load하고 parsing하여 실행한다. 자바스크립트 실행이 완료되면 html parser로 다시 제어 권한이 넘어가고 브라우저가 중지했던 시점부터

DOM생성을 재개한다.

이처럼 브라우저는 Synchronous(동기)로 HTML, CSS, Javascript를 처리한다. 이것은 script태그의 위치에 따라 블로킹이 발생하여

DOM의 생성이 지연될 수 있는 것을 의미 고로 따라서 script태그의 위치는 매우 중요한 의미를 갖는다.

 

script태그는 body elements의 가장 아래에 위치하는 것이 좋다.

- HTML요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다

- DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생한다.