TIL - 브라우저 동작원리 (feat. 브라우저의 구조)

jake·2022년 1월 7일

TIL js

TIL

목록 보기

26/54

오늘은 사이트에서 검색 했을 때 어떠한 원리로 브라우저가 동작하는지 알아보았다.

웹 브라우저란?

즉, 브라우저의 핵심 기능은 사용자가 서버에 웹 페이지를 요청(request)하면 서버로 부터 응답(response)을 받아 웹페이지를 표시하는 것이다. 표시하는 과정은 아래와 같다.

사용자가 브라우저를 통해 서버에 HTML파일을 요청(페이지 접속, 검색 등)
서버는 브라우저에게 HTML,CSS,Javascript 파일을 전달
브라우저의 렌더링 엔진이 HTML파서, CSS파서를 통해 HTML,CSS파일을 파싱(Parsing)하여 DOM과, CSSOM트리로 변환시킨다. 그리고 DOM + CSSOM을 결합하여 렌더 트리를 만든다.
(파싱(Parsing)은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다. 파서와 파싱의 자세한 내용은 참고사이트에 들어가면 더 자세히나와있다.)
생성된 렌더트리를 기반으로 브라우저는 웹페이지를 표시한다.
(정확히는 레이아웃프로세스 : 정확한 위치, 크기를 계산 캡처(요소를 배치한다는말)
페인트 작업 : 렌더링 트리를 화면의 픽셀로 변환을 수행하여 웹페이지를 표시한다. 자세한내용은 참고사이트확인)
자바스크립트 파일은 브라우저의 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. 렌더링 엔진의 HTML파서는 script태그를 만나면 자바스크립트 코드를 실행하기위해 DOM 트리 생성 프로세서를 중단하고 자바스크립트 엔진으로 제어권한을 넘긴다.
제어권한을 넘겨받은 자바스크립트 엔진은 script태그 내의 자바스크립트 코드 또는 script태그의 src에 정의된 파일을 로드하고 파싱하여 실행한다.
(참고로 src로 정의된 script파일은 디스크, 캐시 또는 원격 서버에서 스크립트를 가져올 때까지 기다려야 한다. 이로 인해 주요 렌더링 경로에 수십~수천 밀리초의 지연이 추가로 발생할 수 있다.)
자바스크립트파일 실행이 완료되면 다시 HTML파서로 제어권한을 넘겨 중단한 DOM트리생성을 재개한다.

이처럼 브라우저는동기적으로 HTML, CSS , Javascript를 처리한다.
여기서 핵심은 브라우저가 동기적으로 파일들을 처리하기 때문에 script태그의 위치가 중요하다.

script태그의 위치를 정하는 방법들을 알아보자.

body태그의 맨아래 script태그를 사용하는 방법

HTML요소들이 script의 로딩지연으로 인해 렌더링에 지장을 받지 않게하여 페이지 로딩시간을 단축할 수 있다. (기본적인 컨텐츠를 빨리 본다는 장점)
DOM이 완성되기 전에 자바스크립트가 DOM을 조작하여 나타나는 레퍼런스 오류등을 막을 수 있다.

하지만 웹사이트가 Javascript의 의존도가 높은 사이트일 경우 즉, 의미있는 컨텐츠를 보기위해서 서버에 있는 데이터를 받아온다던지, DOM요소를 조작해서 꾸며준다든지하는 사이트일 경우! 서버에서 Javascript파일을 받아오는 시간(fetching)과 실행 시간(excuting)을 기다려야하는 단점이 있다.

head + async속성 사용

async는 boolean타입 속성으로 선언하는 것만으로 true로 설정된다.
async를 사용하면 HTML파서가 파싱하다가 script 태그를 만나더라도 파싱을 멈추지않고 서버로부터 Javascript 파일을 받아오는(fetching)을 한다.
그리고 Javascript 파일이 fetching이 완료되면 HTML 파서가 파싱을 중단하고 Javascrit 파일을 실행한 뒤 다시 HTML파서가 파싱을 한다.

이러한 방법의 장점은 body끝에 사용한 것 보다 fetching이 파싱과 병렬적으로 일어나기 때문에 Javascrit 파일을 다운로드 받는시간을 절약할 수 있다.
하지만! DOM이 완성되기 전에 자바스크립트가 DOM을 조작하여 오류를 발생 시킬 수 있다. 또한 자바스크립트가 실행될 때 파싱을 멈추고 실행하기 때문에 사용자가 페이지를 보는데 시간이 더 걸린다.
(추가적으로 async를 사용하여 여러개의 script를 실행시킬 경우 선언 된 순서와 상관없이 다운로드 되는 순서대로 실행된다.)

head + defer (제일 좋음)

defer속성을 사용할 경우 HTML파서가 script를 만나면 서버에 Javascript파일을 받아오는 featching요청만 하고, 파싱을 다 끝낸뒤에 Javascrit파일을 실행시킨다.
즉 페이지를 다 다운로드 받은 뒤에 바로 이어서 자바스크립트 파일을 실행 시킨다.
그리고 여러개의 script를 실행시키면 HTML파싱이 끝날 때까지 Javascrit파일 다운로드만 진행 후 선언 된 순서대로 실행된다.