虛擬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比較差異，可以只渲染局部。
學習參考：
