虚拟DOM、DOM diff

·  阅读 39

虚拟DOM是什么?

一个能代表DOM树的对象,通常包含标签名、标签上的属性、事件监听和子元素们,以及其他属性

为什么我们说虚拟DOM比真实DOM快?(虚拟DOM有什么优点)

  1. 它可以减少DOM操作,

虚拟DOM可以将多次操作合并为一次操作【次数】

比如你添加1000个节点,却是一个接一个操作的,而虚拟DOM只需要操作一次

虚拟DOM借助DOM diff可以把多余的操作省掉【范围】

比如你添加1000个节点,其实只有10个是新增的

  1. 可以跨平台渲染

虚拟DOM不仅可以变成DOM,还可以变成小程序,ios应用、安卓应用,因为虚拟DOM本质上只是一个JS对象

虚拟DOM有什么缺点?

需要额外的创建函数,如createElement或h,但是可以通过jsx来简化成xml写法。

规模小的时候,虚拟dom是快的,但当规模到达一定的程度的时候,原生dom操作比较快

DOM diff是什么?

是虚拟DOM的对比算法,就是一个函数,我们称他为patch changed=patch(oldVNode,newVNode) changed要运行的DOM操作,可能长这样 [ {type:'insert',vNode:...}, {type:'text',vNode:...}, {type:'props',propsPatch:[...]} ]

缺点: 同级比较有问题 但我们可以用key来解决,例如v-for里面加上key

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改