Javascript에 대하여 - 브라우저렌더링

유니·2022년 1월 11일

브라우저의 렌더링 과정

브라우저는 아래와 같은 방식으로 렌더링 한다.

HTML, CSS, Js 등 렌더링에 필요한 리소스들을 요청하여 서버로부터 응답을받는다.
브라우저의 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱하여 DOM, CSSOM을 생성하고, 이들을 결합해 렌더트리를 만든다.
브라우저의 자바스크립트 엔진은 서버로부터 응답된 Js를 파싱하여 AST를 생성해 실행한다.
이때 Js는 DOM API 를 이용해 DOM이나 CSSOM으로 변환해 렌더트리에 결합할수도 있다.
렌더트리를 기반으로 HTML 레이아웃을 계산하고 브라우저 화면에 HTML요소를 페인팅한다.

요청과 응답

위의 렌더링 과정에서 살펴보았듯이 서버에 필요한 리소스들을 요청하여 서버로부터 응답을 받고 해당 리소스들을 파싱하여 렌더링 한다.

이때 브라우저는 서버요청을 전송하기위해 주소창을 사용한다. 이때 어떤 루트를 요청할지 명확한 내용은 없지만 암묵적으로 index.html을 응답하도록 기본설정되어있다.

이때 index.html만 응답하도록 설정되어있는데, CSS, Js들이 요청되는 이유는 index.html을 응답받으면서 내부에 존재하는 각종 태그들, script들을 만나게 되면 응답을 일시중단하고 해당 태그와 스크립트에 필요한 리소스들을 요청하기때문에 CSS, Js와 같은 다른 리소스파일들도 요청되는것이다.

HTML파싱과 DOM 생성

브라우저의 렌더링 엔진은 서버로부터 응답된 HTML문서를 파싱하여 브라우저가 이해할 수 있는 구조인 DOM 형태로 변환시킨다. 즉 DOM은 HTML 문서를 파싱한 결과물이다.

DOM 생성 과정 : 바이트 > 문자 > 토큰 > 노드 > DOM

CSS파싱과 CSSOM 생성

HTML을 파싱하여 DOM을 생산하던 도중 CSS를 불러오는 link태그나 style태그를 발견하면 파싱을 중단하고 CSS를 응답요청하게된다. 이때 위의 HTML과 동일한 방식으로 CSS의 DOM을 생성하게 되는데 이것을 CSSOM이라고 한다.

CSSOM 생성 과정 : 바이트 > 문자 > 토큰 > 노드 > CSSOM

렌더 트리 생성

위의 DOM과 CSSOM은 렌더링을 위해 결합되는데 이때 탄생하는것이 렌더트리이다. 그리고 렌더트리를 기반으로 HTML 요소의 레이아웃을 계산하게되고 페인팅 작업을 하게된다.

그리고 렌더링과정은 반복해서 실행될 수 있다. 이때 레이아웃계산과 페인팅작업을 다시 하게된다.

Js 파싱과 실행

HTML파싱으로 생긴 DOM파일은 Js코드에서 DOM API를 통해 직접 컨트롤 할 수 있다.

Js역시 DOM생성과정에서 만날 경우 생성을 멈추고 Js를 요청하여 응답받게되는데 이때 HTML과 CSS와는 다르게 자바스크립트 엔진이 직접 처리한다. 자바스크립트 엔진은 Js코드를 파싱하여 CPU가 이해할 수 있는 저수준 언어로 변환시키는 작업을 한다. 이러한 과정을 거쳐 AST라는 결과물이 탄생하게된다. 그리고 이를 기반으로 인터프리터가 실행 할 수 있는 바이트코드가 만들어진다.

이러한 특징 때문에 script 태그의 위치는 매우 중요해진다. script에 의해 HTML파싱과 DOM생성이 늦춰질 수 있기 때문이다. 이러한 이유 때문에 보통 script는 body태그 내에서 제일 마지막에 위치한다.

HTML5부터는 이러한 현상을 해결하기위해 async/defer 어트리뷰트가 script태그에 추가되었다. 단, async/defer 어트리뷰트는 src가 있는 script에만 사용 할 수 있다.

async : HTML파싱과 자바스크립트 파일의 로드가 비동기적으로 이루어진다. 이후 자바스크립트의 파일 로드가 끝나면 HTML파싱이 잠시 중단되고 Js를 실행한 후 DOM생성이 완료된다.
defer : async와 똑같이 비동기적으로 이루어지나 defer의 경우 DOM생성이 끝난 직후에 실행이된다.