虚拟dom


虚拟 dom 是相对于浏览器所渲染出来的真实 dom而言的,在 react,vue 等技术还没出现之前,我们想要改变页面展示的内容只能通过遍历查询 dom 树的方式,找到需要修改的 dom 然后进行样式行为或者结构的修改,以达到更新 ui 的目的。这样几乎每一次修改都需要遍历整颗dom树,会非常消耗性能。而用虚拟 dom 的话,它就相当于在 js 和真实 dom 中间加了一个缓存,利用了 dom diff 算法避免了没有必要的 dom 操作,从而提高了性能。

本质就是用 js 对象结构表示 DOM 树的结构,然后用这棵树构建一棵真正的 DOM 树,插入到文档当中去,当状态变更的时候,会重新构造一棵新的对象树。然后两棵树进行比较,记录两棵树间的差异,把差异应用到真正的 DOM 树上,视图就更新了。

相关