브라우저 동작 과정

date

Oct 9, 2021

thumbnail

slug

브라우저 동작 과정

author

status

Published

브라우저 컴포넌트

브라우저를 구성하는 요소는 다음과 같습니다.

1. UI

UI

UI는 사용자가 요청한 페이지 외의 모든 UI를 의미합니다.

웹브라우저라고 할 수 있습니다.

브라우저 엔진

UI와 렌더링 엔진 사이에서 중재자 역할입니다.

사용자가 UI와 상호작용 함에 따라 브라우저 엔진은 이를 이해하고 명령을 수행합니다.

렌더링 엔진

렌더링 엔진은 HTML, CSS, JS를 파싱하고 페이지를 그리는 역할입니다.

브라우저마다 다른 엔진을 사용하는데

Chrome, Opera, Edge는 Blink / Firefox는 Gecko / Explorer는 Trident / Safari는 Webkit을 사용합니다.

네트워크 레이어

HTTP, HTTPS같은 프로토콜로 외부의 리소스를 가지고 오며, 서버에 요청을 보낼 때 사용됩니다.

JS 인터프리터

JS를 해석하고 실행하는 역할을 합니다.

UI백엔드

동작하는 운영체제의 인터페이스를 따르는 UI를 처리합니다.

Alert이나 Select가 운영체제 별로 다르게 동작하는 것으로 확인가능합니다.

자료 저장소

브라우저에서 데이터를 로컬에 저장하기 위한 레이어

쿠키, 로컬 스토리지, 세션 스토리지, indexedDB, 웹 SQL 등에 접근하고 데이터를 저장하는데 사용됩니다.

2. 렌더링 엔진의 동작 과정

웹페이지에 접속하게 되면 네트워크를 통해 접속한 웹페이지의 HTML문서를 가져올 수 있습니다.

렌더링엔진은 위와 같은 과정으로 HTML문서를 해석합니다.

과정은 크게 4가지로 볼 수 있는데

파싱

렌더 트리 구축

레이아웃 or 리플로우

페인트

이 과정을 중요 렌더링 경로 라고 부릅니다.

파싱

토큰화된 코드를 구조화하는 과정

코드를 최소단위로 쪼개는 것을 의미합니다 예를 들어 <div>Hello</div>라는 코드를 ['<','d','i','v','>','H','e','l','l','o','<','/','d','i','v'>]이렇게 나타낼 수 있습니다.

파싱과정은 입력받은 문자열에 정해진 문법에 따라 작성되었는지 확인하는 과정입니다.

파서는 보통 2가지 일을 한다.

어휘분석기

자료를 유효한 토큰으로 분해한다.

파서

언어 구문 규칙에 따라 문서 구조를 분석함으로써 파싱 트리를 생성한다.

문서 - 어휘분석 - 구문 분석 - 파싱트리

순서로 동작한다.

파서는 어휘 분석기로부터 새 토큰을 받아 구문 규칙가 일치하는지 확인한다.

규칙에 맞으면 토큰에 해당하는 노드가 파싱트리에 추가되고 파서는 추가적인 토큰을 요청한다.

변환

파서 트리는 최종결과물이 아니다.

소스 코드를 기계 코드로 만드는 컴파일러는 파싱 트리를 생성하고 이를 기계 코드 문서로 변환한다.

문서 - 어휘분석 - 구문 분석 - 파싱트리 - 변환 - 기계코드

어휘는 한글, 영어 등등 단어들을 의미하며, 문법 규칙은 어휘 사이에 적용되는 규칙을 의미합니다.

흔히 말하는 문법 오류가 문법 규칙을 위반한 것이겠죠

브라우저는 HTML, CSS, JS를 해석할 수 있습니다.

JS는 렌더링 엔진 레이어가 아니라 JS 해석기라는 별도의 레이어레서 해석합니다.

렌더링 엔진 동작 과정

렌더링 엔진은 서버로부터 응답받은 HTML문서를 얻는 것으로 시작된다.

렌더링 엔진에서는 js를 제외한 HTML, CSS를 파싱합니다.

1) HTML문서를 파싱하여 DOM트리를 구축

2) CSS파일과 스타일 요소를 파싱

3) DOM 트리와 2의 결과물을 합쳐 렌더트리를 구축

4) 렌더 트리 각 노드에 대해 화면 상에서 배치할 곳을 결정

5) UI 백엔드에서 렌더 트리의 노드를 그림

Dom 트리 구축

<html>
    <body>
        <p>Hello World</p>
        <div><img src="example.png" /></div>
    </body>
</html>

상단에 해당되는 dom트리입니다.

CSSOM을 생성합니다.

CSS 규칙을 포함한 CSS 파일은 스타일 시트 객체로 파싱됩니다. CSS 규칙 객체는 선택자와 선언 객체, CSS 문법과 일치하는 다른 객체를 포함합니다.

랜더 트리(DOM + CSSOM)

DOM 트리가 구축되는 동안 브라우저는 DOM트리를 기반으로 렌더 트리를 생성한다. 렌더 트리는 문서를 시각적인 구성요소로 만들어주는 역할을 합니다.

이 구성요소를 렌더러, 렌더 객체라고 하는데 렌더러는 자신과 자식요소를 어떻게 배치하고 그리는지 알고 있습니다.

렌더러는 DOM 요소에 부합하지만 1:1로 대응하지는 않습니다. 이유는 <HEAD>나 display: none과 같은 사용자가 볼 수 없는 DOM 요소는 렌더 트리에 추가되지 않습니다.(hidden속성은 트리에 나타납니다.)

렌더 트리를 배치합니다.

렌더 트리는 위치와 크기를 가지고 있지 않기 때문에 각 객체들의 위치와 크기를 결정해줍니다.

렌더 트리를 그립니다.

렌더 트리가 만들어져 레이아웃이 구성되었으면 UI 백엔드가 렌더 트리의 객체를 px값으로 나타냅니다.

자바스크립트는 어떻게 처리할까요?

자바스크립트는 자바스크립트 엔진이 처리한다. HTML파서는 <script> 태그를 만나면 DOM 생성을 중단하고 자바스크립트 엔진으로 권한을 넘깁니다.

제어 권한을 받은 자바스크립트 엔진은 <script>태그의 JS코드나 src 속성에 정의된 JS파일을 로드하고 파싱하여 실행한다.

JS의 실행이 완료되면 HTML파서로 다시 제어권한을 주고 DOM 생성을 재개합니다.

브라우저는 동기적으로 HTML, CSS, JS를 처리합니다. 자바스크립트 엔진에 제어권한이 있을 때 JS 코드가 완성되지 않은 DOM을 조작한다면 에러가 발생합니다.이것이 HTML파일에서 JS 파일을 body 태그 하단에 위치시키는 이유입니다.