웹브라우저의 주요 구성요소, 웹브라우저 렌더링 프로세스

https://d2.naver.com/helloworld/59361

https://www.browserstack.com/guide/browser-rendering-engine

 

웹브라우저의 주요 구성요소

1. 사용자 인터페이스(User Interface)

    : visual elements available on the web page. 웹브라우저를 띄웠을 때 screen 이외의 메뉴 부분이라고 생각하면 될 듯. 주소표시줄, 이전/다음 버튼, 홈버튼 등등처럼 엔드유저가 interect할 수 있는 부분.

 

2. 브라우저 엔진(Browser Engine)

    : 모든 웹 브라우저의 core component. 사용자인터페이스와 렌더링엔진 사이의 bridge 역할을 한다. 사용자인터페이스에서 input 받은 내용에 따라 렌더링엔진이 작동하도록 한다.

 

3. 렌더링 엔진(Rendering Engine)

    : client가 request한 콘텐츠를 screen에 그리는 역할을 한다. 모든 브라우저는 각기 고유한 렌더링엔진을 갖는다.

 

4. 통신(Networking)

    : HTTP나 FTP같은 표준프로토콜을 이용한 네트워크 호출을 담당한다. 인터넷통신과 관련된 보안 이슈도 관리한다.

 

5. 자바스크립트 해석기(JavaScript Interpreter)

    : JavaScript 파싱, 실행을 담당한다. 

 

6. UI 백엔드(UI Backend)

    : 윈도우창, 콤보박스같은 core widgets를 그리는데 사용된다. platform-specific이 아닌 generic inerface를 노출한다. OS UI methods를 사용한다.

 

7. 자료저장소

    : 웹브라우저는 로컬에 여러가지 데이터를 저장해야할 필요가 있다. 예를 들어 쿠키처럼. 그래서 웹브라우저는 WebSQL, IndexedDB, FileSystem같은 데이터 저장 메카니즘과 호환성이 있어야만 한다.

 

 

웹브라우저가 웹페이지를 렌더링하는 과정

https://itnext.io/how-the-browser-renders-a-web-page-dom-cssom-and-rendering-df10531c9969

 

브라우저가 서버에 HTML document request를 보낼 때,

서버는 binary stream format 형식의 text file과 Content-Type: text/html; charset=UTF-8를 포함하는 response header를 함께 response한다.

 

여기서 text/html이라는 것은 MIME Type을 가리키는데, 웹브라우저는 이 MIME Type 정보를 읽고 데이터를 어떻게 처리해야할지 결정한다.

 

다시 말하면, MIME Type 정보를 읽고 웹브라우저는 binary format 데이터를 readable text file로 변환하든지, pdf reader plugin을 실행하는지 어쩌든지 하는 것이다.

 

만약에 MIME Type 정보가 없다면, 웹브라우저는 데이터를 어떻게 처리해야할지 몰라서 결국은 plain text format으로 렌더링 할 것이다.

 

웹브라우저가 HTML code를 읽으면서 html, body, div와 같은 HTML element를 DOM Node라는 JavaScript object를 생성한다. 모든 HTML elements는 JavaScript objects로 변환된다.

 

HTML elements들은 각기 다른 여러가지 properties를 갖고있기 때문에, Node objects(JavaScript objects)들은 서로 다른 class(constructor functions)로부터 만들어진다.

 

Node obejcts들이 다 만들어지면, 그 다음에는 그 Node objects에 대한 tree형태의 구조(content tree 혹은 DOM tree라고 부른다)를 생성한다. HTML elements들은 서로 이곳 저곳에 엉켜있기때문에, 이미 생성해놓은 Node objects를 복제하면서 tree 형태의 구조를 만든다. 웹브라우저는 그 구조를 보고 효과적으로 웹페이지를 렌더링할 수 있다.

 

 

 

DOM과 CSSOM(대충 말하자면 CSS DOM)을 결합하여 Render-Tree가 만들어진다.

Render Tree는 컨텐츠가 적절한 순서대로 화면에 보여지도록 한다. 아직 position, size 값들은 할당되지 않은 상태이다.

 

레이아웃 프로세스(Layout process)를 거쳐서 컨텐츠의 위치, 사이즈 값이 정해진다.

 

그 다음에는 화면에 그리는 단계(Paint process)로 넘어간다. (이 단계에서 paint(), UI backend layer의 개념이 나옴)

 

 

* DOM tree와 Render tree의 차이점?

 - DOM tree는 모든 HTML elements(nodes)를 포함한다.

반면에 Render tree는 DOM, CSSOM의 결합체인데, screen에 보여지는 nodes만을 포함한다.