瀏覽器運行原理

1、瀏覽器簡介

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

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

　　URL是統一資源定位符，對能夠從互聯網上獲得的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標準資源的地址。互聯網上的每一個文件都有一個惟一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎麼處理它。

2、瀏覽器的主要構成

　　瀏覽器的主要組件包括：

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

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

　　瀏覽器最重要或者說核心的部分是「Rendering Engine」，可大概譯爲「渲染引擎」，不過咱們通常習慣將之稱爲「瀏覽器內核」。負責對網頁語法的解釋（如標準通用標記語言下的一個應用HTML、JavaScript）並渲染（顯示）網頁。 因此，一般所謂的瀏覽器內核也就是瀏覽器所採用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。.

　　渲染引擎

　　渲染引擎在瀏覽器窗口中顯示所請求的內容，渲染引擎一開始會從網絡層獲取請求文檔的內容，一般以8K分塊的方式完成。 獲取了文檔內容以後，渲染引擎開始正式工做，其基本流程如圖所示：解析HTML以構造DOM樹→構建渲染樹結構→渲染樹的佈局 →繪製渲染樹。

　　注意：這個過程是逐步完成的，爲了更好的用戶體驗，渲染引擎將會盡量早的將內容呈現到屏幕上，並不會等到全部的html都解析完成以後再去構建和佈局渲染樹。 它是解析完一部份內容就顯示一部份內容，同時，可能還在經過網絡下載其他內容。

　　解析HTML以構造DOM樹

　　瀏覽器爲HTML定製了專屬的解析器。HTML解析器的任務是將HTML標記解析成DOM樹。Html5規範中描述了這個解析算法，算法包括兩個階段——符號化和構建樹，符號化是詞法分析的過程，將輸入解析爲符號，HTML的符號包括開始標籤、 結束標籤、 屬性名及屬性值。符號識別器識別出符號後，將其傳遞給樹構建器，並讀取下一個字符，以識別下一個符號，這樣直處處理完全部輸入。

　　HTML解析流程

　　瀏覽器會遵照一套步驟將HTML文件轉換爲 DOM 樹。宏觀上，能夠分爲幾個步驟：　　　　　　

　　

　　瀏覽器從磁盤或網絡讀取HTML的原始字節，並根據文件的指定編碼（例如 UTF-8）將它們轉換成字符串。在網絡中傳輸的內容其實都是 0 和 1 這些字節數據。當瀏覽器接收到這些字節數據之後，它會將這些字節數據轉換爲字符串，也就是咱們寫的代碼。

　　事實上，構建DOM的過程當中，不是等全部Token都轉換完成後再去生成節點對象，而是一邊生成Token一邊消耗Token來生成節點對象。換句話說，每一個Token被生成後，會馬上消耗這個Token建立出節點對象。注意：帶有結束標籤標識的Token不會建立節點對象。

　　構建渲染樹結構

　    DOM會捕獲頁面的內容，但瀏覽器還須要知道頁面如何展現，因此須要構建CSSOM。構建CSSOM的過程與構建DOM的過程很是類似，當瀏覽器接收到一段CSS，瀏覽器首先要作的是識別出Token，而後構建節點並生成CSSOM。

當咱們生成 DOM 樹和 CSSOM 樹之後，就須要將這兩棵樹組合爲渲染樹。在這一過程當中，不是簡單的將二者合併就好了。渲染樹只會包括須要顯示的節點和這些節點的樣式信息，若是某個節點是 display: none的，那麼就不會在渲染樹中顯示。

　　渲染樹的佈局與繪製

　　當瀏覽器生成渲染樹之後，就會根據渲染樹來進行佈局（也能夠叫作迴流）。這一階段瀏覽器要作的事情是要弄清楚各個節點在頁面中的確切位置和大小。一般這一行爲也被稱爲「自動重排」。佈局流程的輸出是一個「盒模型」，它會精確地捕獲每一個元素在視口內的確切位置和尺寸，全部相對測量值都將轉換爲屏幕上的絕對像素。佈局完成後，瀏覽器會當即發出「Paint Setup」和「Paint」事件，將渲染樹轉換成屏幕上的像素。