瀏覽器關鍵渲染路徑及Vue中的虛擬DOM

一、瀏覽器渲染頁面過程

（瀏覽器渲染引擎的渲染流程）

1.一、關鍵渲染路徑

關鍵渲染路徑是指瀏覽器從最初接收請求來的HTML、CSS、javascript等資源，而後解析、構建樹、渲染布局、繪製，最後呈現給客戶能看到的界面這整個過程。

因此瀏覽器的渲染過程主要包括如下幾步：

1. 解析HTML生成DOM樹。
2. 解析CSS生成CSSOM規則樹。
3. 將DOM樹與CSSOM規則樹合併在一塊兒生成渲染樹。
4. 遍歷渲染樹開始佈局，計算每一個節點的位置大小信息。
5. 將渲染樹每一個節點繪製到屏幕。

 二、JS操做真實DOM的代價！

用咱們傳統的開發模式，原生JS或JQ操做DOM時，瀏覽器會從生成DOM樹開始從頭至尾執行一遍流程。在一次操做中，我須要更新10個DOM節點，瀏覽器收到第一個DOM請求後並不知道還有9次更新操做，所以會立刻執行流程，最終執行10次。例如，第一次計算完，緊接着下一個DOM更新請求，這個節點的座標值就變了，前一次計算爲無用功。計算DOM節點座標值等都是白白浪費的性能。即便計算機硬件一直在迭代更新，操做DOM的代價仍舊是昂貴的，頻繁操做仍是會出現頁面卡頓，影響用戶體驗。

 三、虛擬DOM的做用

虛擬DOM就是爲了解決瀏覽器性能問題而被設計出來的。假如像上面所說的，若一次操做中有10次更新DOM的動做，會生成一個新的虛擬DOM，將新的虛擬DOM和舊的進行比較，而後將10次更新的 diff 內容保存到一個JS對象中，最終經過這個JS對象來更新真實DOM，由此只進行了一次操做真實DOM，避免大量無謂的計算量。因此，虛擬DOM的做用是將多個DOM操做合併成一個，而且將DOM操做先所有反映在JS對象中（操做內存中的JS對象比操做DOM的速度要更快），再將最終的JS對象映射成真實的DOM，交由瀏覽器去繪製。

四、實現虛擬DOM

虛擬DOM就是是用JS對象來表明節點，每次渲染都會生成一個VNode。當數據發生改變時，生成一個新的的VNode，經過 diff 算法和上一次渲染時用的VNode進行對比，生成一個對象記錄差別，而後根據該對象來更新真實的DOM。本來要操做的DOM在vue這邊仍是要操做的，不過是統一計算出全部變化後統一更新一次DOM，進行瀏覽器DOM的一次性更新。

 

參考：https://baijiahao.baidu.com/s?id=1593097105869520145&wfr=spider&for=pc、https://www.jianshu.com/p/af0b398602bc