虛擬dom 不會進行排版和重繪操作。
虛擬dom 進行頻繁修改，然後一次性比較並修改真實dom 中需要改的部分，最後在真實dom 中進行排版與重繪，減少過多dom節點排版與重繪損耗
真實dom 頻繁排版與重繪的效率是相當低的
虛擬dom有效降低大面積（真實dom節點）的重繪月排版，因為最終與真實dom比較差異，可以只渲染區域性
總之，一切為了減少頻繁的大面積重繪引發的效能問題，不同框架不一定需要虛擬dom, 關鍵看框架是否頻繁會引發大面積的dom操作
回流：當render tree的部分或者全部元素因改變了自身的寬高，布局，顯示或隱藏，或元素內部的文字結構發生了變化，導致需要重新構建頁面的時候，回流就產生了。
重繪：當乙個元素自身的寬高，布局，及顯示或隱藏沒有改變，而只是改變了元素的外觀風格的時候，就產生了重繪。
結論：回流必定觸發重繪，而重繪不一定觸發回流。
如何避免回流：
不適用能夠觸發回流的屬性
建立乙個圖層，讓回流在圖層裡面進行，限制回流和重繪的範圍，減少瀏覽器的運算工作量。
用transform 代替 top, left, margin-top, margin-left...這些位移屬性
用opacity 代替visiblity,但是要同時有translatesd 或者 translatez這些可以建立的圖層的屬性存在才可以阻止回流
但是第二點經過我的實驗，發現如果不加 transform: translatez(0) 配合opacity的話還是會產生回流的，而只用visibility 就只會產生重繪不會回流3. 不要使用 js **對dom 元素設定多條樣式，選擇用乙個 classname 代替之。而 opacity 加上 transform: translatez/3d 這個屬性之後便不會發生回流和重繪了
4. 如果確實需要用 js 對 dom 設定多條樣式那麼可以將這個dom 先隱藏，然後再對其設定
5. 不要在迴圈內獲取dom 的樣式例如：offsetwidth, offsetheight, clientwidth, clientheight... 這些。瀏覽器有乙個回流的緩衝機制，即多個回流會儲存在乙個棧裡面，當這個棧滿了瀏覽器便會一次性觸發所有樣式的更改且重新整理這個棧。但是如果你多次獲取這些元素的實際樣式，瀏覽器為了給你乙個準確的答案便會不停重新整理這個緩衝棧，導致頁面回流增加。
所以為了避免這個問題，應該用乙個變數儲存在迴圈體外。
6. 不要使用table 布局，因為table 的每乙個行甚至每乙個單元格的樣式更新都會導致整個table 重新布局
7. 動畫的速度按照業務按需決定
9. 必要時可以開啟 gpu 加速，但是不能濫用
虛擬DOM操作
什麼是虛擬dom 虛擬dom的設計思想 1 提供一種方便的工具，使得開發效率得到保障 2 保證最小化的dom操作，使得執行效率得到保障 也就是說，虛擬dom的框架 工具都是這麼做的 根據虛擬dom樹最初渲染成真實dom 當資料變化，或者說是頁面需要重新渲染的時候，會重新生成乙個新的完整的虛擬dom ...
為什麼要減少操作DOM
為什麼要減少操作dom？下面將按照以下布局同時操作div1和div2 然後在控制台列印出所需的時間，對時間盡心對比 以下是布局 lang en charset utf 8 titletitle head id div1 div id div2 div 這裡寫 script body html 對di...
什麼是虛擬dom
虛擬dom就是乙個特殊的物件。vue之所以執行高效，因為採用了虛擬dom，減少了對真實的dom操作。一 dom和虛擬dom對比 dom 二 dom操作和虛擬dom操作耗時對比 let num 0 console.time test 方式一 平均 60ms 80ms for var i 0 i 100...