javascript - react 裡面的 virtual DOM的效率為什麼比直接操作DOM更快呢

Question

react裡面有virtual DOM這個概念嘛
他和原生操作DOM的差別就是用JS產生一個類似中介的虛擬dom
這個是用JS實現的DOM，他裡面有記錄了變化前後的一些記錄，然後在重新渲染的時候，進行有區別部分的局部渲染。這樣就可以避免整個頁面的渲染？那原生操作DOM就是整個頁面渲染？我看很多網路上的例子都是說什麼原生每次變化都是直接重置innerHTML,這樣操作如果大量資料的話就會GG,哈？ virtual dom是記錄變化，然後利用他的diff演算法進行最佳化，最後在有變化的地方進行局部渲染，那麼我用原生不能實現同樣的效果？我不能也透過對比找出變化然後利用diff演算法在指定位置進行innerHTML修改？這樣效率會比virtual dom差？求解

Answer 1

我的理解是你可以做到比React快，如果你能做到兩點：

1. Avoid unnecessary re-render.

2. Have a better diff algorithm!

具體可以看​​stackoverflow上virtual dom作者的回答。

Answer 2

是這樣的:
首先, 虛擬dom並沒有比直接原生操作更快, 所謂"快"是有條件的
比如點讚, 數字+1, 直接操作dom會更快.
如果你能自己捋請規則, 每回手動操作dom的時候, 都只改動應該改變的, 那dom操作永遠比虛擬dom快.
但如果你的改動勾連的地方很多, 而且要保持狀態, 那虛擬dom的自動diff無疑會讓你省更多心.
比如一個列表, 列表項目有點讚等狀態, 回复數量等信息, 有動態新增, 有動態加載, 這時候你要直接操作dom會很繁瑣.
虛擬dom的核心在於diff, 它自動幫你計算那些應該調整, 然後只修改該修改的區域, 省下的不是運行速度這種小速度, 而是開發速度/維護速度/邏輯簡練程度等"總體速度"
當然, 虛擬dom也有槽點, 這裡就不展開了

Answer 3

如果耗費大量精力去優化每一個頁面的每一種 DOM 變化，你肯定是比自動化的 virtual DOM 快的；
問題是在通常情況下你不會去這樣做。
所以在大部分情況下，vitrual DOM 能在速度更快的條件下，提供更強的能力（例如把控制項渲染到 canvas 上）。

Answer 4

visual DOM不會比你直接操作DOM來的快（寫的程式碼夠好的前提下），它的出現是因為React re-render all的機制。即對於React而言，任何一點的變化都需要重新渲染整個應用，如果是真實DOM的話，這樣的效能是不能接受的。

具體可以看​​看尤大的回答

Answer 5

(用VDOM diff來選擇性地更新DOM) (一般) 比 (每次重建DOM) 快

diff演算法為了降低時間複雜度一般會犧牲品質，不保證能給出最小diff。那麼應該可以建構幾個VDOM 使得diff結果就是重建DOM，這種情況下VDOM可能會比較慢。