브라우저 동작 원리

브라우저 동작 원리

브라우저의 핵심 기능

사용자의 요청을 서버에 요청(Request)하고, 서버의 응답(Response) 받아 웹페이지에 표시한다.

 

브라우저의 동작 원리

 

01. 서버 요청과 응답 

1. 사용자의 요청을 서버에 요청(Request) 하고, 서버로부터

HTML, CSS, Javascript, 이미지 파일 등을 응답받는다.

 

02. HTML, CSS 처리 (렌더링 엔진)   

1. 렌더링 엔진의 HTML,CSS 파서에 의해 파싱(Parsing)되어

2. DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다.

3. 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다.

 

* 렌더링 엔진이란 요청받은 내용을 브라우저 화면에 표시하는 역할을 한다.

03. Javascript를 처리 ( 자바스크립트 엔진)

1. 렌더링 엔진의 HTML 파서가 script 태그를 만나면 DOM 생성 작업을 중지하고

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

2. 제어 권한을 넘겨 받은 자바스크립트 엔진은 script 태그의 src 속성에 정의된 자바스크립트 파일을

   불러오고 파싱하여 실행한다.

3. 자바 스크립트의 실행이 완료되면 다시 렌더링 엔진의 HTML 파서로 제어 권한을 넘긴다.

4. 렌더링엔진은 중지했던 시점부터 DOM 생성을 재개한다.

 

* 자바스크립트는 렌더링엔진이 아닌 자바스크립트 엔진이 처리한다. 자바스크립트 해석기라고도 한다.

끝으로 Script 태그의 위치는 중요한 의미를 갖는다.

브라우저는 동기(Synchronous)적으로 HTML, CSS, JS를 처리한다.

따라서 script태그 위치에 따라 DOM 생성 프로세스에 영향을 준다. 자칫 블로킹이 발생할 수 있다.

그렇담 script 태그는 어디다 두어야 하는가? 

 

-> Body 맨 아래 두는 것을 권장하고 있다. 이유는 아래와 같다.

 

•  페이지로딩 시간 단축된다. HTML요소들이 렌더링에 지장 받지 않기 때문에
•  에러를 방지할 수 있다. DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작하면 에러가 발생한다. 

 

 

Reference

poiemaweb.com/js-browser

d2.naver.com/helloworld/59361