虛擬DOM就是用JS來模擬DOM結構的,它並不是真正的DOM。 為什麼使用虛擬DOM? 用傳統的方式去操作DOM的時候,瀏覽器會從構建DOM樹開始,從頭到尾執行一遍流程。簡單來說,就是會觸發重排與重繪。 比如說,在一次操作中,需要更新10個DOM節點。 理想是一次性構建完成DOM樹,但是瀏覽器並不會 ...
虛擬DOM就是用JS來模擬DOM結構的,它並不是真正的DOM。
為什麼使用虛擬DOM?
用傳統的方式去操作DOM的時候,瀏覽器會從構建DOM樹開始,從頭到尾執行一遍流程。簡單來說,就是會觸發重排與重繪。
比如說,在一次操作中,需要更新10個DOM節點。
理想是一次性構建完成DOM樹,但是瀏覽器並不會那麼智能,在收到第一個更新DOM請求之後,並不知道後續還會有9次更新操作,最終執行10次。
很顯然,這樣子操作DOM的代價十分昂貴,性能開銷大。
虛擬DOM的出現解決了這個問題。
如果一次操作中有10次更新DOM的操作,那麼不會立即操作真實DOM,而是將這10次更新的diff內容保存在本地的一個js對象中,最終將這個js對象一次性attach到DOM樹上。
為什麼操作真實DOM的開銷大?
其實並不是查詢dom樹性能開銷大。
而是dom樹的實現模塊和js模塊是分開的,這些跨模塊的通訊增加了成本,以及dom操作引起了頁面重繪重排,使得性能開銷巨大。
因為PC的計算能力強大,原本在PC端是沒有性能問題的。
但是隨著移動端的發展,越來越多的頁面需要在智能手機上運行展示,而手機的性能參差不齊,會出現性能問題。
前端框架如何解決性能問題?
Angular,React,Vue等這些前端框架,他們的思路是每次更新dom都儘量避免刷新整個頁面,而是針對性的去刷新那被更改的一部分,來釋放被無效渲染占用的gpu、cpu性能。
Angular
採用的機制是 臟值檢測查機制,所有使用了 ng 指令的 scope data 和 {{}} 語法的 scope data 都會被加入臟檢測的隊列。
React
通過虛擬 dom 和 setState 更改 data 生成新的虛擬 dom 以及 diff 演算法來計算和生成需要替換的 dom 做到局部更新的。
Vue
用的是虛擬 dom,通過重寫 setter 、getter 來實現觀察者監聽 data 屬性的變化生成新的虛擬 dom,通過 h 函數創建真實 dom 替換掉dom樹上對應的舊 dom。
h函數就是vue中的createElement方法,這個函數的作用就是創建虛擬dom,追蹤dom變化。
虛擬DOM和真實DOM的區別
- 1、虛擬DOM不會觸發重排與重繪,真實DOM會觸發重排(不一定)與重繪。
- 2、虛擬DOM 可以進行頻繁的修改,可以有效降低大面積操作真實DOM引起的重排與重繪。真實DOM頻繁排版與重繪的效率是相當低的。
- 3、虛擬DOM通過diff演算法最終與真實DOM比較差異,可以只渲染局部。
學習參考: