瀏覽器渲染原理

最近在開發b/s 框架的專案。開發都是web頁面，也就是執行在瀏覽器上的使用者操作頁面。瀏覽器是使用者得到服務最直接的地方，後台做的好，前台也要讓使用者用著方便。這裡就研究一下瀏覽器的一些原理是如何提高使用者體驗的。

首先，這裡有乙個新詞，渲染。什麼是網頁渲染呢？網頁渲染就是html**根據css定義的規則，顯示在瀏覽器頁面上的而過程。

來看看瀏覽器是怎麼幹活的：

1）使用者第一次登陸某html的web頁面。瀏覽器向伺服器傳送訪問請求

2）伺服器響應使用者，返回html檔案

3）瀏覽器在讀取html檔案的時候發現了乙個引用了外部css檔案

4）瀏覽器繼續向伺服器傳送訪問css檔案的請求

5）伺服器返回css檔案

6）瀏覽器拿到了css檔案，就可以渲染頁面，期間可能會有讀到其他外部檔案，同樣向伺服器傳送請求

7）拿到所有檔案後，瀏覽器渲染頁面完畢。

以上過程是使用者第一次登陸的時候，會多次向伺服器傳送請求。當登陸過一次之後，後面就可以使用快取中的檔案進行訪問。如果有新的請求才會再次訪問服務區。

瀏覽器拿到一段**，會先將**進行分解解析為html、css、js指令碼，如果是html進行會dom解析，會解析成乙個dom tree 。css會被解析為css rule tree。

拿html為例：

this is an example dom.

下面就是乙個dom tree

如果看這個頁面的布局的話，我們抽象一些就可以看成下面這樣

藍色部分是html的dom tree，橘色部分是css的規則樹。

補充：在設計程式的時候，任何一步操作都是需要cpu進行把控，這樣的意思就是執行什麼都是需要時間的。只不過隨著硬體裝置的公升級，速度越來越快了，但是作為程式開發人員或者設計人員，要想開發出優秀的**，就要經常考慮如何為程式執行節省時間。我們經常說的效能優化，也是包括這一點的。

例如上面的dom tree。如果你修改了最上層的dom，那麼下層也會跟著發生改變。這樣執行的時間就會長，所以盡可能只修改層級低的dom。

關於頁面效能優化這一塊，理解還不是特別的多，後面的學習，再繼續交流討論吧。

參考：