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

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可能更慢。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板