在這個資訊傳播便利的時代，每個人一天當中會頻繁使用瀏覽器來看各式各樣

的網頁，不管是查找資料和從電商平台購買東西或是訂票等....

而瀏覽器也有 Chrome、Safari、Firefox、Edge、Internet

Explorer 這幾懂不同的瀏覽器，但瀏覽器的功能卻是大同小異，

讓我們來看看瀏覽器怎麼組成

瀏覽器主要分為:

User Interface

UI 使用者介面包括瀏覽器上的導覽列，上一頁、下一頁、Home 按鈕、重新整理和書籤列。

透過上面列舉的按鈕或列表輸入，在瀏覽器的顯示區域會隨著改變，以及和瀏覽器各個部分互相溝通，

進一步對渲染的畫面產生影響。

Browser engine

瀏覽器引擎，負責溝通 UI 使用者介面和渲染引擎的中介，譬如當你按了上一頁，

他接收到 UI 的動作，他就會告訴渲染引擎要回到上一頁。

Rendering engine 渲染引擎

當從 Network layer 網路請求得到的資料，然後透過 HTML、CSS 渲染將內容呈現在畫面上。

他可以解析 HTML 變成 DOM TREE，和 CSS 解析成 CSS TREE，然後經歷繪製和呈現在畫面上。

以下為各瀏覽器使用的渲染引擎：

Chrome 、 Opera - Blink
Firefox - Gecko
Internet Explorer - Trident
Edge - EdgeHTML
Safari - WebKit

The Network layer

透過 UI 的導覽列輸入 URL 並透過 HTTP 或 FTP 不同的網路協議去獲取資源。

The JavaScript engine

各個瀏覽器在底層皆有各自不同的引擎，負責編譯 JavaScript Code，

轉成機器語言，讓電腦系統看得懂並且執行。

而各個瀏覽器分別使用不同的引擎：

• Chrome - Chrome V8
• Safari - JavaScriptCore
• Firefox - SpiderMonkey
• Edge - Chakra
• Internet Explorer - Chakra

UI Backend

後端幫忙繪製一些小工具譬如選擇表單、輸入框和核取方塊等。

Data Storage

瀏覽器需要一些存取資料的功能，他使用了各種瀏覽器中的 API 來實現，

有以下這些：

• Local storage
• Session Storage
• Cookies
• WebSQL
• IndexedDB
• FileSystem
• AppCache
• Service Workers

參考資源：
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
https://hackernoon.com/how-do-web-browsers-work-40cefd2cb1e1
https://dzone.com/articles/behind-browser-basicspart-1
https://gizmodo.com/which-browser-engine-powers-your-web-browsing-and-why-d-1833935288