브라우저(Chrome v8)의 동작원리

브라우저의 핵심 기능은 브라우저 사용자가 참조하고자 하는 웹페이지를 서버에 요청(request) 하고 서버의
응답(response) 을 받아 브라우저의 표시한다. 브라우저는 HTML, CSS, JS, assets 등을 미리 응답 받아둔다. HTML과 CSS 파일은 랜더링 엔진의 HTML 파서 와 CSS 파서 에 의하여 파싱(Parsing) 되어
DOM, CSSOM 트리로 변환되어 렌더 트리에 결합된다. 다음 과정으로 생성된 렌더 트리를 기반으로 브라우저는 웹을 구동(표시)한다

cf)

Parsing 이란 일련의 문자열을 의미있는 token(어휘 분석 단위) 으로 분해하여 그것들을 이용해 Parse tree 를 만드는 과정이다.(Parse tree 란 token 유도과정 혹은 구문구조를 보여주는 트리.)
Parse 란 인터럽트 나 컴파일러 의 구성 요소 가운데 하나로 input token에 내재된 자료구조를 빌드하고 문법을 검사하는 것을 말한다.(parsing 을 하는 프로세서. 즉, parser 가 parsing을 하는것으로 이해하면 됌.)

다음 그림을 참조하며 보면 이해가 쉽다.

Javascript 는 렌더링 엔진이 아닌 자바스크립트 엔진이 따로 처리한다. HTML 파서는 <script> 태그를 만나몉 Js 코드를 실행하기 위하여 DOM 생성 프로세서를 멈추고 Js 엔진으로 제어권한을 넘겨준다. 권한을 받은 Js 엔진은 <script> 태그 내의 자바스크립트 코드 또는 src attribute 에 정의된 Js 파일을 불러오고 파싱하여 실행한다. Js 실행이 끝나면 다시 HTML 파서에게 권한을 넘겨주며 브라우저가 멈췄던 시점부터 다시 DOM 을 생성한다. 이처럼 브라우저는 동기적으로 HTML,CSS,JS 를 처리하는 것을 알 수 있다. 따라서 <script> 태그의 위치에 따라 블로킹이 발생하여 DOM 생성에 지연이 발생할 수 있으므로 html 코드 내의 <script> 태그의 위치는 중요한 의미를 갖는다. body 요소의 가장 아래에 <script> 코드를 위치 시키면 body 내의 DOM 이 먼저 렌더링이 된 후 Js 엔진에 권한을 넘겨 주는 것이기에 블로킹에 간섭받지 않을 수 있다.