[부스트코스] 1. 웹 프로그래밍 기초 | 1-4) browser의 동작

1. Browsers

  HTML + CSS + Javascript로 웹페이지를 만들었다 하더라도, 이들을 해석해서 렌더링 해주는 과정이 빠진다면, 이들도 모두 무용지물일 수 밖에 없습니다. 그렇기에 웹의 컴파일러라고 할 수 있는 '브라우저'가 이러한 역할을 하게 됩니다.

  대표적인 브라우저는 아래와 같은 것들이 있습니다. 순서대로 Chrome, Firefox, Safari, Microsoft Edge, Internet Explorer 입니다. 

 

 

  이 브라우저들은 모두 웹페이지를 렌더링한다는 점에서는 공통점을 가지고 있지만, 이들은 서로 다른 렌더링 엔진 (Rendering Engine)을 사용한다는 점에서 차이점을 보입니다. Chrome은 Blink, Firefox는 Gecko, Safari는 Webkit, Internet Explorer은 Trident를 사용합니다. 

 

2. 브라우저의 작동 원리

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks

 

  브라우저의 요소는 다음과 같이 이루어져 있습니다.

 

1. The user interface: this includes the address bar, back/forward button, bookmarking menu, etc. Every part of the browser display except the window where you see the requested page.
2. The browser engine: marshals actions between the UI and the rendering engine.
3. The rendering engine : responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen.
4. Networking: for network calls such as HTTP requests, using different implementations for different platform behind a platform-independent interface.
5. UI backend: used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform specific. Underneath it uses operating system user interface methods.
6. JavaScript interpreter. Used to parse and execute JavaScript code.
7. Data storage. This is a persistence layer. The browser may need to save all sorts of data locally, such as cookies. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem.

  위의 웹페이지에서는 각각의 요소를 위와 같이 설명합니다. 이 중에서도 가장 눈여겨 보아야 할 것은 바로 Rendering engine입니다. 이 component는 아래와 같은 방식으로 작동하며, HTML과 CSS를 파싱하여 렌더링하는 역할을 합니다.

WebKit main flow

    브라우저의 동작원리는 매우 복잡하고 어렵습니다. 하지만 알아놓으면 이후 웹 개발시 도움이 된다고하니, 시간 날 때 한번씩 봐두는 것도 좋을 듯 합니다.