瀏覽器是如何渲染網頁的《學如逆水行舟，不進則退》

時間 2019-11-11

原文原文鏈接

如今咱們主要接觸的主流瀏覽器有：IE, FireFox, Safari, Chrome,Opera; 你真的瞭解它們嗎？css

1. 瀏覽器的主要功能

向服務器發出請求，在瀏覽器窗口中展現你選擇的網絡資源;（通常指HTML文檔，也能夠是PDF,圖片，或其餘的類型）資源的位置由用戶使用的URL(統一資源標示符)指定。瀏覽器解釋並顯示HTML文件的方式是在HTML和CSS規範中指定的。這些規範由網絡標準化組織W3C(萬維網聯盟)進行規定。

2. 瀏覽器的主要組件

用戶界面：(包括地址欄，前進/後退按鈕，書籤菜單等)。除了瀏覽器主窗口顯示的各個部分都屬於用戶界面
瀏覽器引擎：在用戶界面和呈現引擎之間傳送指令
呈現引擎/渲染引擎/瀏覽器內核/排版引擎/解釋引擎：負責顯示請求的內容，並將解析後的內容顯示在瀏覽器屏幕上
網絡：用於網絡調用，好比HTTP請求，其接口與平臺無關，併爲全部平臺提供底層實現。
用戶界面的後端：用於繪製基本的窗口小部件，好比組合框和窗口。其公開了與平臺無關的通用接口，而在底層使用操做系統的用戶界面方法。
JavaScript解釋器：用於解析和執行JavaScript代碼

主流瀏覽器	js引擎
IE -> Edge	JScript（IE3.0-IE8.0） / Chakra
Chrome		V8（大名鼎鼎）
Safari		Nitro（4-）
Firefox		SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）
Opera		Linear A（4.0-6.1）/ Linear B（7.0-9.2）

數據存儲：(持久層)；瀏覽器須要在硬盤上保存各類數據，例如Cookie。HTML5定義了」網絡數據庫「（完整且輕便的瀏覽器內數據庫）

3. 渲染引擎/瀏覽器內核解析

默認狀況下，呈現引擎可顯示HTML和XML文檔與圖片，經過插件(或瀏覽器擴展程序)顯示，eg:PDF查看器插件就能夠顯示PDF文檔。
不一樣的瀏覽器瀏覽器內核不相同

主流瀏覽器	內核
IE -> Edge	trident->EdgeHTML
Chrome		webkit->blink
Safari		webkit
Firefox		Gecko
Opera		Presto->blink

4.瀏覽器渲染基本流程

從網絡層獲取請求文檔的內容（內容的大小通常限制在8000個塊之內）--->
解析HTML構造DOM樹和CSSOM樹--->構建渲染樹(把DOM樹中的一些不可視元素去掉，
而後與CSSOM合成一棵render樹）--->渲染DOM樹佈局(計算出各個節點(元素)在屏幕的位置)
-->渲染樹繪製(瀏覽器根據渲染樹將頁面渲染到屏幕)

(1). 解析HTML文檔一邊邊構建DOM樹一邊構建CSS規則樹(CSSOM)

解析HTML/XHTML文檔時，將各標記逐個轉化成"內容樹"上的DOM節點，遇到css標籤或JS腳本標籤就下載和解析（其中css是異步下載同步執行）；html
在構建DOM樹過程當中，當遇到css元素{包括外部CSS樣式以及內聯樣式}，瀏覽器會開啓一個異步請求線程，在該線程上，瀏覽器會去請求相應的css文件，而且根據該文件去構建CSSOM樹(也叫css rule)，css的加載並不會致使html解析和渲染的中止，即不會阻塞dom樹的構建；該線程會阻塞 JavaScript引擎線程（即css後面的js模塊的解析會在css解析完畢後執行），由於js腳本不只能夠讀取修改到dom，也能夠讀取修改到cssom。故在js腳本執前，browser必須保證到css文件徹底加載並解析完成，即cssom樹徹底構建好。這就致使了js執行的延遲，也所以致使html解析和渲染延遲。（這就是css阻塞js執行，阻塞渲染的根本緣由）html5
構建DOM樹過程當中，瀏覽器渲染和 JS 執行是共用一個線程，即單線程工做，多線程會產生渲染 DOM 衝突。若是遇到當遇到JS元素時，HTML解析器就會將控制權轉讓給JavaScript引擎線程，該線程會阻斷HTML解析器的運行，就阻塞了DOM樹的構建當js加載而且執行完畢後，JavaScript引擎線程會將控制權還給HTML解析器，讓其去繼續構建dom樹。也就是說，若是你想首屏渲染的越快，就越不該該在首屏就加載 JS 文件，這也是都建議將 script 標籤放在 body 標籤底部的緣由。固然，並非說 script 標籤必須放在底部，由於你能夠給 script 標籤添加 defer 或者 async 屬性git
JS文件不僅是阻塞DOM的構建，它會致使CSSOM也阻塞DOM的構建。本來DOM和CSSOM的構建是互不影響，井水不犯河水，可是一旦引入了JavaScript，CSSOM也開始阻塞DOM的構建，只有CSSOM構建完畢後，再恢復DOM樹構建。這是由於JavaScript不僅是能夠改DOM，它還能夠更改樣式，也就是它能夠更改CSSOM。由於不完整CSSOM是沒法使用的，若是JavaScript想訪問CSSOM並更改它，那麼在執行JavaScript時，必需要能拿到完整的CSSOM。因此就致使了一個現象，若是瀏覽器還沒有完成CSSOM的下載和構建，而咱們卻想在此時運行腳本，那麼瀏覽器將延遲腳本執行和DOM構建，直至其完成CSSOM的下載和構建。也就是說，在這種狀況下，瀏覽器會先下載和構建CSSOM，而後再執行JavaScript，最後在繼續構建DOM。github
CSS規則樹中的元素是和 DOM 元素相對應的，但並不是一一對應。非可視化的 DOM 元素不會插入規則樹中，例如「head」元素。若是元素的 display 屬性值爲「none」，那麼也不會顯示在規則樹中（可是 visibility 屬性值爲「hidden」的元素仍會顯示）。有一些 DOM 元素對應多個可視化對象。它們每每是具備複雜結構的元素，沒法用單一的矩形來描述。web