瀏覽器的運行原理

1、什麼是瀏覽器

要想了解瀏覽器的運行原理，首先必需要先了解什麼是瀏覽器。

瀏覽器是指能夠顯示網頁服務器或者文件系統的HTML文件（標準通用標記語言的一個應用）內容，並讓用戶與這些文件交互的一種軟件。

瀏覽器的主要功能就是向服務器發出請求，在瀏覽器窗口中展現您選擇的網絡資源。這裏所說的資源通常是指 HTML 文檔，也能夠是 PDF、 圖片或其餘的類型。資源的位置由用戶使用URI（統一資源標符）指定。

目前使用的主流瀏覽器有五個：Internet Explorer、 Firefox、 Safari、 Chrome 和 Opera。

1. 瀏覽器按照引擎分類
Trident引擎：Internet Explorer

Webkit引擎：Chrome（28版本後基於blink，blink是webkit的一個分支）和Safar

Gecko引擎：Firefox

Presto引擎：早期Opera採用，後用webkit引擎

下面是各大瀏覽器的用戶佔有率

2、瀏覽器的主要構成

瀏覽器的主要組件包括：

1. 用戶界面：包括地址欄、後退/前進按鈕、書籤目錄等，也就是你所看到的除了用來顯示你所請求頁面的主窗口以外的其餘部分。
2. 瀏覽器引擎：用來查詢及操做渲染引擎的接口。
3. 渲染引擎：用來顯示請求的內容，例如，若是請求內容爲html，它負責解析html及css，並將解析後的結果顯示出來。
4. 網絡：用來完成網絡調用，例如http請求，它具備平臺無關的接口，能夠在不一樣平臺上工做。
5. UI後端：用來繪製相似組合選擇框及對話框等基本組件，具備不特定於某個平臺的通用接口，底層使用操做系統的用戶接口。
6. JS解釋器：用來解釋執行JS代碼。
7. 數據存儲：屬於持久層，瀏覽器須要在硬盤中保存相似cookie的各類數據，HTML5定義了web database技術，這是一種輕量級完整的客戶端存儲技術。

瀏覽器組成部分如圖所示：

3、瀏覽器內核工做原理簡介

瀏覽器包含不少個模塊，有網絡、資源管理、網頁瀏覽、頁面管理、插件、帳戶、開發者工具等等。其中，網頁瀏覽功能模塊是瀏覽器的核心，它主要完成從HTML文檔到可視化的圖像轉換工做，這是瀏覽器內核的主要功能。

一般瀏覽器內核也被稱爲渲染引擎，它的輸入是網絡和存儲模塊得到的HTML文檔（包括CSS，JavaScript），渲染引擎的輸出就是這些HTML元素描述的圖像和JS描述的控制動做。

 

 

渲染引擎主要分爲HTML解釋器、CSS解釋器、佈局以及JavaScript引擎。大致的流程以下：網頁內容通過HTML解釋器後，構建一顆DOM樹，而且將文檔中包含的JavaScript腳本交由JS引擎處理，將CSS樣式表交由CSS解釋器處理；最終DOM樹接收CSS解釋器解析的樣式信息來構建中間模型——繪圖模型。該模型再通過佈局模塊計算內部各元素的位置和大小信息，最後由繪圖模塊完成從該模型到圖像的繪製。

 

 

 4、前端處理流程簡介

一、輸入url

二、查看瀏覽器緩存，看是否有緩存，若是有緩存，繼續查看緩存是否過時，若是沒有過時，直接返回緩存頁面，若是沒有緩存或者緩存過時，發送一個請求。

三、瀏覽器解析url地址，獲取協議、主機名、端口號和路徑。

四、獲取主機ip地址過程

（1）瀏覽器緩存

（2）主機緩存

（3）hosts文件

（4）路由器緩存

（5）DNS緩存

（6）DNS遞歸查詢

五、瀏覽器發起和服務器的TCP鏈接，執行三次握手

六、三次握手鍊接後，瀏覽器發送一個http請求

七、服務器收到請求，轉到相關的服務程序，期間可能須要鏈接並操做數據庫

八、服務器看是否須要緩存，服務器處理完請求，發出一個響應

九、服務器並根據請求頭包含信息決定是否須要關閉TCP鏈接

十、瀏覽器對接收到的響應進行解碼

十一、瀏覽器解析收到的響應並根據響應的內容進行構建DOM樹，構建render樹，渲染render樹等過程

十二、處理嵌入的其餘資源如css文件、js文件、圖片文件、音視頻等文件。