브라우저란?
웹 브라우저는 HTML, CSS, Javascript를 해석한 내용을 화면에 보여주는 소프트웨어이다.
주요기능
브라우저의 핵심 기능은 사용자가 참조하고자 하는 내용(HTML, CSS, Javascript, 이미지 파일 등)을 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것이다.
동작과정
HTML, CSS파일은 렌더링 엔진의 HTML 파서와 CSS파서에 의해 파싱되어 각각 DOM, CSSOM 트리로 변환되고 렌더트리로 결합된다.
이렇게 생성된 렌더트리를 기반으로 브라우저는 웹페이지를 표시한다.
작동과정을 간단하게 위와 같이 나타낼 수 있다.
자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진으로 처리된다.
HTML 파서가 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 작업을 잠시 멈추고 자바스크립트 엔진으로 제어 권한을 넘겨준다.
자바스크립트 엔진이 실행을 완료하면 다시 HTML 파서로 제어 권한을 넘겨주게 되고, 이때 중지했던 시점부터 DOM 생성 작업이 실행된다.
위와 같이 브라우저에서는 HTML, CSS, JavaScript가 동기적으로 처리된다.
따라서 script 태그 위치에 의해 블로킹이 발생하면 DOM 생성에 지연이 생길 수 있다.
또 다른 문제로 DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작하여 에러가 발생하는 경우가 있다.
페이지 로딩 시간 지연과 에러발생의 이슈를 줄이기 위한 방법으로
body 태그 가장 아래에 script 태그를 두는 것이 가장 좋은 방법이 될 수 있다.
참고 및 출처
NAVERD2 : 브라우저는 어떻게 동작하는가?
PoiemaWeb : 브라우저는 어떻게 작동하는가?
https://bbangson.tistory.com/87
