브라우저의 동작원리 (파서, script)

최영진·2023년 3월 22일
0

브라우저의 동작원리

웹페이지 URL을 입력하면 브라우저는 서버에 데이터를 요청한 후
html, css, js 를 받는다.
html과 css 는 렌더링엔진에서 각각 html 파서, css 파서 를 통해
DOM 트리, CSSOM 트리로 변환된다.
이 두 트리를 결합하여 렌더트리를 생성하고 화면에 배치(layout)후 그린다.

js 는 어떻게 처리할까?

js는 자바스크립트엔진이 처리한다.
html 파서 html 을 파싱 중 script태그를 만나게 되면 동작을 멈추고 자바스크립트 엔진에 권한을 넘긴다.
자바스크립트엔진은 script를 다운로드 후 다시 html 파서에게 권한을 넘긴다.

script 태그의 위치??

head 나 body에 위치한다.
html 파서는 html 의 head 부터 읽기 시작하는데 head 의 script가 헤비할 경우 유저는 빈화면을 보게 될 것이라 좋지 못하다.
또한 body에 둘 경우에도 일단 html 이 그려진 화면을 보겠지만 마찬가지로 script 용량이 클 경우 의미 있는 화면은 보지 못할 것이다.

defer 나 async 를 script 에 추가함으로 이러한 상황을 타파할 수 있는데
async 는 비동기적으로 script 가 설치되기 때문에 유리하지만 설치가 완료된 순서대로 실행이 되기 때문에 script 가 순서대로 실행되어야 할 때 좋지 못하다.
defer 는 async 처럼 병렬적으로 script가 설치 되지만 모든 script가 설치된 후에 실행 순서대로 실행되기 때문에 좋다.

js의 실행 순서가 중요치 않을때는 async를 사용하면 빠르게 js를 파싱할 수 있을 것이고 defer는 순서가 필요할때 사용하면 되겠다.

profile
안녕하시오.

0개의 댓글