네이버 테크톡에 게시된 탈리 가르시엘의 웹 브라우저의 동작원리에 대한 글을 기반으로 공부하였으며 필요한 부분만 정리해보고자 한다.

자바스크립트 엔진 (Javascript Engine)

브라우저에는 렌더링뿐만 아니라 자바스크립트를 해독하는 자바스크립트 엔진도 존재한다.

자바스크립트같은 프로그래밍 언어는 컴퓨터가 이해할 수 있는 언어로 변환해 주어야 컴퓨터가 그것을 읽고 처리할 수 있다.

컴퓨터는 0과 1로 이루어진 기계어만을 읽을 수 있다.

그래서 보통은 컴파일러 : 하나의 프로그래밍 언어를 다른 프로그래밍 언어로 바꿔주는 프로그램

우리가 작성한 프로그래밍 언어를 컴퓨터가 해독할 수 있는 바이너리 코드로 변환할 때 보통 컴파일한다고 한다. 한번에 코드를 읽고 실행하기 때문에 빠르다

인터프리터 : 코드를 한 줄씩 읽어 내려가며 실행하는 프로그램
한 줄씩 읽어내려가며 한 줄씩 실행시키는 특징이 있다. 그래서 속도가 느리다.

자바스크립트 인터프리터도 이러한 개념. 스크립트

V8 엔진에서는 컴파일러의 특징과 인터프리터의 특징을 혼합한 JIT 컴파일러를 사용한다.

결국 자바스크립트엔진 V8은 크게 봐서는 인터프리팅 방식을 사용한다고 볼 수 있다.

렌더링 엔진 (Rendering Engine)

html과 css를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진
ex. 크롬은 webkit였다가 요새는 blink, 파이어폭스는 게코

• rendering engine의 역할

1. html, css, js, 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 보여준다
2. 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료 구조를 생성한다

Critical Rendering Path

Dom Tree 생성
CSSOM Tree 생성 => Render Tree 생성 => Render Tree 배치 => Render Tree 그리기

렌더링 동작과정

브라우저가 문서(HTML)을 해석하면서 하는 일

1. 로딩(Loading) - HTTP 모듈 또는 파일시스템으로 전달 받은 resource stream을 읽는 과정

2. 파싱(Parsing) - 파싱은 DOM 트리를 만드는 과정. HTML 파서는 말 그대로 HTML 문서를 해석하는데 사용되고 XML 파서는 XML 형식을 따르는 SVG, MathML을 처리하는데 사용

3. 렌더링 트리(Rendering Tree) - 파싱으로 생성된 DOM 트리는 HTML/XML 문서의 내용을 트리 형태로 자료 구조화 한 것을 말한다. 즉, DOM 트리는 내용 자체를 저장하고 있고 화면에 표시하기 위한 위치와 크기 정보, 순서 등을 저장하기 위한 별도의 트리 구조가 필요한데 이를 일반적으로 렌더링 트리라고 부른다.

4. CSS 스타일 결정

5. 레이아웃(Layout) - 렌더링 트리가 생성될 때, 각 렌더(Render) 객체가 위치와 크기를 갖게 되는 과정

6. 그리기(Painting) - 렌더링 트리를 탐색하면서 특정 공간에 RGB 값을 채우는 과정

간략 정리 (̵̵́˘̩ᴥ˘̩)̵̵̀

1. HTML을 파싱하여 DOM 노드를 만듬
2. 이 DOM 노드들을 병합하여 DOM 트리를 만듬
3. CSS를 파싱하여, 스타일 규칙을 만듬
4. DOM 및 CSSOM을 결합하여 렌더 트리를 형성(Attachment)
5. 렌더 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산. Render 트리를 배치(Layout)
6. 개별 노드를 화면에 페인트. Render 트리를 화면에 그림(Painting)

위 과정을 통해 브라우저는 렌더링을 함

Parser

파싱은 서버로부터 전송받은 문서의 문자열을 브라우저가 이해할 수 있는 구조로 변환하는 과정.

파싱 결과는 문서 구조를 나타내는 노드 트리인데, 파싱 트리 또는 문법 트리라고도 한다.

브라우저에 렉싱 과정을 통해서 토큰이 해당 속성과 규칙을 정의하는 노드 객체로 변환된다.

각 노드가 연관성을 가질 수 있도록 트리를 생성하는데 이게 바로 DOM 트리

HTML 문서에 있는 모든 것들은 이 DOM을 구성

최상단은 document 객체, 태그는 element node, 태그의 요소는 attribute node, 텍스트의 경우는 text node가 되어 트리 구조로 생성한다. 이외의 주석도 comment node가 되어 생성된다.

브라우저는 Html 문서를 파싱하는 과정에서 자바스크립트나 css와 같은 파일들을 추가로 불러오도록 요청하기도 한다.

Html을 돔 트리로 만드는 과정과 비슷하게 css로는 cssom 라는 트리가 만들어진다. Cssom는 돔이 어떻게 화면에 표시될 지 알려주는 역할

Css도 위에서 아래로 스타일규칙을 가지고 있기 때문에 이 또한 트리구조를 가지고 있다.

예를 들어 스타일 시트에서 body 태그에 text-align 이라는 속성을 정해뒀다면 body의 자식요소에게도 동일한 속성이 전파되어서 적용되게 된다.

그리고 렌더링 엔진이 dom 트리와 cssom 트리를 합쳐서 렌더 트리라는 것을 만들게 되는데, 렌더 트리는 화면에 표시되어야 할 모든 컨텐츠, 스타일 정보를 포함하고 있는 트리

step

브라우저가 서버에게 html 파일을 요청 requests/response

loading dom요소로 변화 scripting dom으로 변환하고 cssom요소로 변환한다음에 브라우저 window로 표시하기 위해 준비. rendering tree로 만든다음 어떤 위치에 얼마나 크게 위치할건지 layout하고 그린다 painting

construction / operation 파트

dom/cssom/render tree를 최종적으로 만드는 것까지가 construction
layout, paint, composiiton까지가 operation

Render Tree 생성

DOM 트리는 내용 자체를 저장하고 있고, 화면에 표시하기 위한 위치와 크기 정보, 그리는 순서 등을 저장하기 위한 별도의 트리 구조가 필요한데 이를 일반적으로 렌더링 트리라고 부른다.

렌더 트리가 만들어지는 과정 :

Document 객체부터 각 노드를 순회하면서 각각의 맞는 cssom을 찾아서 규칙을 적용

그러면서 렌더와 관련된 요소들을 렌더 트리에 포함시키게 되는데, 이 때 meta 태그나 display : none 같은 속성을 가진 요소들은 렌더와 관계가 없기 때문에 렌더 트리에 포함되지 않는다. 실제로는 더 많은 데이터를 가지고 있고 브라우저마다도 조금씩 다르게 되어 있다.

그래서 DOM 트리와 렌더 트리는 1:1 대응하는 관계가 아니다
예를 들어 "head" 요소와 같은 비시각적 DOM 요소는 렌더 트리에 추가되지 않는다. 또한 display 속성에 "none" 값이 할당된 요소는 트리에 나타나지 않는다.

이렇게 DOM 트리와 Render 트리의 차이점을 알고 있어야한다.