一家专门做护肤的网站,在线照片编辑工具,WordPress用ck插件,网站设计师培训中心diff算法
简述#xff1a;第一次对比真实dom和虚拟树之间的同层差别#xff0c;后面为对比新旧虚拟dom树之间的同层差别。
虚拟dom
简述#xff1a;js对象形容模拟真实dom
具体#xff1a;
1.虚拟dom是存在内存中的js对象#xff0c;利用内存的高效率运算。虚拟dom属…diff算法
简述第一次对比真实dom和虚拟树之间的同层差别后面为对比新旧虚拟dom树之间的同层差别。
虚拟dom
简述js对象形容模拟真实dom
具体
1.虚拟dom是存在内存中的js对象利用内存的高效率运算。虚拟dom属性远少于dom原生属性用它来描述真实的dom。虚拟dom并不会在浏览器中显示。
2.虚拟dom如果出现频繁更改会最后汇总一次性比较并且修改真实dom需要修改的部分减少了大量重绘回流
虚拟dom对象具体属性为
sel:标签名data:节点属性children:子节点elm:对应的真实节点key当前节点的keytext当前节点的文字内容
相较于真实dom的需要比较属性更加的少 效率更加的高。 React-diff 同层左右比较法
分别设置新旧虚拟dom树
react优化diff算法只会同级对比不会垮级对比跨级别会直接删除重建分别为tree-diff component-diff element-diff
tree-diff逐层比较的过程就为tree-diff当tree-diff结束的时候时候所有需要更新的元素都会被找到
component-diff组件级别的对比组件类型相同则不需要更新不同则需要删除旧组件创建新组件
element-diff元素级别的对比如果两个组件级别相同则是需要元素级别的对比。对于列表渲染react 会强制一个key对比新旧元素的时候用key进行是否是同一个的判断如果没有key则是一个个更新浪费性能。
当使用setState的时候会被标记为脏节点事件循环的最后才回去渲染脏节点及脏节点的子树。我们可以使用should ComponentUpdate去选择渲染。
从左到右遍历查找更新
vue-diff 前后指针法
分别设置新旧虚拟dom树
设置为新头-startIndex新尾-endIndex旧头-oldStartIndex旧尾-oldEndIndex分别进行
1.新头-旧头移动虚拟dom
2.新尾-旧尾移动虚拟dom
3.旧头-新尾移动真实dom
4.旧尾-新头移动真实dom
的节点比较
如果找到相同的节点则进行位置更改1和2是虚拟节点的移动3和4是进行真实节点的移动
如果新指针指向的节点并没有被匹配到 那么将循环所有的老节点跟新指针指向的节点的key去做农比较匹配上了移动节点匹配不成功则新加节点
指针头 指针尾-- 直到前指针后指针结束
如果旧子节点先处理完了新子节点有剩余说明有要新增的节点。
如果新子节点先处理完了旧子节点有剩余说明有要删除的节点。
vue和react diff相同处和区别
相同处
使用虚拟dom只进行同层的比较
不同处
react使用的是遍历从左到右vue使用的为前后指针查找不同。
如果元素的className vue认为是不同的元素react认为为相同的
如果li中出现了第一个移动li元素移动到最后一个vue通过前后指针一次性可以直接移动而react需要遍历到最后才会进行移动。
vue-key
为什么需要设置key
当4种匹配方法没有正常的匹配到diff会用key再次进入oldDom中查找。因为key的唯一性可以被Map数据结构充分利用相比较遍历时间复杂度为OnMap的是时间复杂度为O1。
为什么key最好不要用index
当4种方法都没有被匹配到的时候用key进行查找由于index为数字极大可能会与oldDom里的index重合diff会判断为相同节点进行处理但是对比的时候发现并不相同最终会遍历查找到真实dom上导致重绘回流性能消耗极大。
特殊例子当出现input的时候input的输入框如果用index可能会造成input内容并没有更换
参考十分详细的diff算法原理解析-CSDN博客
http://t.csdnimg.cn/ZNaAM
