[Javascript] 브라우저 동작 원리

본 게시물은 poiemaweb(https://poiemaweb.com/)에 기술된 내용을 기반으로 작성한 게시물입니다.

 

1. 브라우저 동작 원리

 - 브라우저의 핵심 기능 : 참조하고자 하는 웹페이지를 서버에 요청. 서버의 응답을 받아 브라우저에 표시

    - 서버의 응답 : HTML, CSS, Javascript, 이미지 파일 등

 

1.1 동작 순서

1.1.1. 렌더링 엔진

    - HTML, CSS 파일은 렌더링 엔진의 HTML 파서, CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환

    - 변환된 DOM, CSSOM 트리는 렌더 트리로 결합하여 이를 기반으로 웹 페이지 표시

    - HTML 파서는 script 태그를 만나면 자바스크립트 코드 실행을 위해 DOM 생성 프로세스를 중지

    - 그 후 자바스크립트 엔진으로 제어 권한을 넘김

1.1.2. 자바스크립트 엔진

    - sciprt 태그 내의 자바스크립트 코드 및 script 태그의 src 어트리뷰트에 정의된 자바스크립트 파일 로드, 파싱, 실행

    - 자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨 DOM 생성 프로세스를 재개

 

1.2 script 태그를 body 요소의 가장 아래에 두는 것이 좋은 이유

 - 브라우저는 동기적(Synchronous)으로 HTML, CSS, Javascript를 처리

    => script 태그의 위치에 따라 블로킹 발생, DOM 생성이 지연될 수 있음

 - HTML 파서는 DOM 생성을 하다 script 태그를 만났을 때 제어 권한을 자바스크립트 엔진으로 넘김

    => 따라서 DOM 생성 도중 script 태그를 만나면 DOM 생성 프로세스가 중지

 - 따라서 script 태그를 body 요소의 가장 아래에 뒀을 때 다음과 같은 이점을 얻을 수 있음

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

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

        - DOM이 완성된 후 자바스크립트를 실행하면 위 에러를 피할 수 있음

---

확인하기

1. 브라우저가 화면을 출력하는데 필요한 동작 순서

2. script 태그를 body 요소의 중간에 두었을 때 발생할 수 있는 문제점

---

REFERENCES

- poiemaweb

    - 브라우저는 어떻게 동작하는가?

    - Render-tree Construction, Layout, and Paint

    - Adding interactivity with javascript

    - 오픈소스 웹킷(WebKit)의 구조와 원리