Vue中的瀏覽器關鍵渲染路徑及虛擬DOM
阿新 • • 發佈：2019-03-11
對比 javascrip 發生 有變 script bsp 內存 vnode nsh
1、瀏覽器渲染頁面過程
（瀏覽器渲染引擎的渲染流程）
1.1、關鍵渲染路徑
關鍵渲染路徑是指瀏覽器從最初接收請求來的HTML、CSS、javascript等資源，然後解析、構建樹、渲染布局、繪制，最後呈現給客戶能看到的界面這整個過程。
所以瀏覽器的渲染過程主要包括以下幾步：
- 解析HTML生成DOM樹。
- 解析CSS生成CSSOM規則樹。
- 將DOM樹與CSSOM規則樹合並在一起生成渲染樹。
- 遍歷渲染樹開始布局，計算每個節點的位置大小信息。
- 將渲染樹每個節點繪制到屏幕。
2、JS操作真實DOM的代價！
用我們傳統的開發模式，原生JS或JQ操作DOM時，瀏覽器會從生成DOM樹開始從頭到尾執行一遍流程。在一次操作中，我需要更新10個DOM節點，瀏覽器收到第一個DOM請求後並不知道還有9次更新操作，因此會馬上執行流程，最終執行10次。例如，第一次計算完，緊接著下一個DOM更新請求，這個節點的坐標值就變了，前一次計算為無用功。計算DOM節點坐標值等都是白白浪費的性能。即使計算機硬件一直在叠代更新，操作DOM的代價仍舊是昂貴的，頻繁操作還是會出現頁面卡頓，影響用戶體驗。3、虛擬DOM的作用
虛擬DOM就是為了解決瀏覽器性能問題而被設計出來的。假如像上面所說的，若一次操作中有10次更新DOM的動作，會生成一個新的虛擬DOM，將新的虛擬DOM和舊的進行比較，然後將10次更新的 diff 內容保存到一個JS對象中，最終通過這個JS對象來更新真實DOM，由此只進行了一次操作真實DOM，避免大量無謂的計算量。所以，虛擬DOM的作用是將多個DOM操作合並成一個，並且將DOM操作先全部反映在JS對象中（操作內存中的JS對象比操作DOM的速度要更快），再將最終的JS對象映射成真實的DOM，交由瀏覽器去繪制。
4、實現虛擬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
Vue中的瀏覽器關鍵渲染路徑及虛擬DOM