上網瀏覽網頁對普通人來講是非常簡單的操作

而對於程序員來說，這件事的背後發生了什麼事情呢？

動畫視頻：

瀏覽器是如何渲染頁面的呢 https://www.zhihu.com/video/1055937587335823360

文字解析：

輸入的網址在通過DNS解析後得到伺服器地址

瀏覽器向伺服器發起http請求，經過TCP/IP三次握手確認鏈接後，伺服器將需要的代碼發回給瀏覽器。

瀏覽器接收到代碼後進行解析，經過三大步驟：

DOM構造、佈局以及繪製頁面，最終展現為人人都能看懂的網頁。

第一步，DOM構造

瀏覽器首先將收到的html代碼，通過html解析器解析構建為一顆DOM樹。

數據結構中有許多的樹

（此處植入洗髓換骨營的廣告，詳情可以去騰訊課堂去看修真院的洗髓換骨營）

而DOM樹就像是一顆倒長著的大樹，這樣的對象模型決定了節點之間都有一定的關聯

它們關係可能有父子、有兄弟，我們可以順著這顆樹做出許多操作。

接著將接收到的css代碼，通過css解析器構建出樣式表規則

將這些規則分別放到對應的DOM樹節點上，得到一顆帶有樣式屬性的DOM樹。

第二步，佈局

瀏覽器按從上到下，從左到右的順序，讀取DOM樹的文檔節點，順序存放到一條虛擬的傳送帶上。

傳送帶上的盒子就是節點，而這條流動的傳送帶就是文檔流。

如果我們讀取到的節點是屬於另一個節點下的子節點，那麼在放入傳送帶的時候，就應該按順序放到該節點盒子的內部。

如果子節點下還有子節點，在傳送帶上的時候就繼續套到子一級的盒子內部。

根據它在DOM樹上的結構，可以嵌套的層級沒有限制的哦。

文檔流排完之後，開始獲取計算節點的坐標和大小等CSS屬性，作為盒子的包裝說明。

然後把盒子在倉庫裏一一擺放，這就將節點佈局到了頁面。

第三步，繪製頁面

佈局完成之後，我們在頁面上其實是看不到任何內容的

瀏覽器只是計算出了每一個節點對象應該被放到頁面的哪個位置上，但並沒有可視化。

因此最後一步就是將所有內容繪製出來，完成整個頁面的渲染。

道理都講過了，不如……舉個栗子

瀏覽器獲得一些代碼，

它們最終會渲染成這樣。

第一步是將代碼解析為一顆DOM樹

按從上到下，從左到右的順序，將樹上的節點壓入文檔流然後佈局

我們看看從body節點開始

然後是body節點下的input節點，label節點，一個接一個的被壓入文檔流

佈局的時候因為是行內元素無法佔滿一行，會在同一行裏挨個排列

如果調整頁面寬度讓它變窄，行內元素會因為一行放不下而換行

最後將它們渲染就完成了這個頁面

再舉一個栗子

一個登錄頁面，頁面中登錄表單的元素很多，那麼可以打個包，把需要提交的表單元素放到一個黑盒中

這個黑盒可以是form或者是div或者是其他元素，這裡我們選擇form。

在文檔流中從h1到p到form挨個壓入，佈局的時候因為它們都是塊級元素每個盒子都會獨佔一行

因此從上到下依次放入到頁面中，form作為一個大黑盒不需要去管它的內部有什麼只要做好自己就行。

再看向form的子級元素：

它們在文檔流中從input，到label，到button，挨個放入form黑盒內部，映射到佈局頁面上以form作為舞臺進行排列。

如果這些子元素有行內元素，將排列在一行直到碰到form的邊界才會換行

如果這些子元素有塊級元素，它會獨佔一行寬度與form同寬。

喫了這兩個栗子後，我們再來看一個完整的頁面它的代碼多了一些，DOM樹也更複雜。

body下的子元素有三個nav，aside和div

它們作為3個打包黑盒看起來是這樣的

然後將它們的子元素分別放到各自的黑盒當中

如果遇到圖片只需要把它當做設置了寬高的普通行內元素處理就好了

當然你也可以設置它的屬性為塊級元素，改變圖文混排時佈局的效果。

由此我們可以知道文檔流與網頁之間的關係，其實就是將一維節點映射到二維空間的關係。

怎麼樣是不是很簡單啊？學會後趕緊上手寫點代碼練習一下吧。

更多內容，歡迎加大師姐微信：it_xzy

入羣瞭解課程動態、幕後花絮，還有機會參與到課程製作，成為聯合製作人，記得備註來自果凍課堂

推薦閱讀：

相關文章