javascript - react 裡面的 virtual DOM的效率為什麼比直接操作DOM更快呢
给我你的怀抱
给我你的怀抱 2017-05-18 10:58:01
0
5
716

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

给我你的怀抱
给我你的怀抱

全部回覆(5)
習慣沉默

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

  1. Avoid unnecessary re-render.

  2. Have a better diff algorithm!

具體可以看​​stackoverflowvirtual dom作者的回答。

某草草

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

Ty80

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

曾经蜡笔没有小新

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

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

小葫芦

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

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板