虛擬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比較差異，可以只渲染區域，
學習參考：
- 什么是虛擬DOM（博客園）
- 什么是虛擬DOM（簡書）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/529985.html
標籤：其他
上一篇：事件委托和排他思想
下一篇：CSS基本用法