JS每日一题:Vue中的diff算法?

栏目: JavaScript · 发布时间: 5年前

内容简介:Vue中的diff算法?概念: diff算法是一种优化手段,将前后两个模块进行差异对比,修补(更新)差异的过程叫做patch(打补丁)为什么vue,react这些框架中都会有diff算法呢? 我们都知道渲染真实dom的开销是很大的,这个跟性能优化中的重绘重排意义类似, 回到正题来, 有时候我们修改了页面中的某个数据,如果直接渲染到真实DOM中会引起整棵数的重绘重排, 那么我们能不能只让我们修改的数据映射到真实DOM, 做一个最少化重绘重排呢,说到这里你应该对为什么使用diff算法有一个简单的概念了

20190125

Vue中的diff算法?

概念: diff算法是一种优化手段,将前后两个模块进行差异对比,修补(更新)差异的过程叫做patch(打补丁)

为什么vue,react这些框架中都会有diff算法呢? 我们都知道渲染真实dom的开销是很大的,这个跟性能优化中的重绘重排意义类似, 回到正题来, 有时候我们修改了页面中的某个数据,如果直接渲染到真实DOM中会引起整棵数的重绘重排, 那么我们能不能只让我们修改的数据映射到真实DOM, 做一个最少化重绘重排呢,说到这里你应该对为什么使用diff算法有一个简单的概念了

virtual DOM和真实DOM的区别

一句话概括吧,virtual DOM是将真实的DOM的数据抽取出来,以对象的形式模拟树形结构, diff 算法比较的也是virtual DOM

代码理解

<div>
    <p>JS每日一题</p>
</div>

// 转换成VNode 类似于下面这种

const Vnode = {
    tag: 'div',
    children: [
        { tag: 'p', text: 'JS每日一题' }
    ]
};

diff 是如何比较的?

源码太多了,就不贴了, 有兴趣的可以自己看看 https://github.com/vuejs/vue/...

简单的说就是新旧虚拟dom 的比较,如果有差异就以新的为准,然后再插入的真实的dom中,重新渲染

特点

  • 只会做同级比较,不做跨级比较
  • 比较后几种情况

    • if (oldVnode === vnode) ,他们的引用一致,可以认为没有变化。
    • if(oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text) ,文本节点的比较,需要修改,则会调用 Node.textContent = vnode.text
    • if( oldCh && ch && oldCh !== ch ) , 两个节点都有子节点,而且它们不一样,这样我们会调用 updateChildren 函数比较子节点,这是diff的核心
    • else if (ch) ,只有新的节点有子节点,调用 createEle(vnode)vnode.el 已经引用了老的dom节点, createEle 函数会在老dom节点上添加子节点。
    • else if (oldCh) ,新节点没有子节点,老节点有子节点,直接删除老节点。

key的作用

设置key和不设置key的区别:

不设key,newCh和oldCh只会进行头尾两端的相互比较,设key后,除了头尾两端的比较外,还会从用key生成的对象 oldKeyToIdx 中查找匹配的节点,所以为节点设置key可以更高效的利用dom

如我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的:

JS每日一题:Vue中的diff算法?

即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率?

所以我们需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。

JS每日一题:Vue中的diff算法?

JS每日一题:Vue中的diff算法?

所以一句话,key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果

总结

  • 尽量不要跨层级的修改dom
  • 在开发组件时,保持稳定的 DOM 结构会有助于性能的提升
  • 设置key可以让diff更高效

关于JS每日一题

JS每日一题可以看成是一个语音答题社区

每天利用碎片时间采用60秒内的语音形式来完成当天的考题

群主在次日0点推送当天的参考答案

  • 注 绝不仅限于完成当天任务,更多是查漏补缺,学习群内其它同学优秀的答题思路

点击加入答题


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

电子商务:管理与社交网络视角(原书第7版)

电子商务:管理与社交网络视角(原书第7版)

(美)埃弗雷姆·特班(Efraim Turban)、戴维.金(David King)、李在奎、梁定澎、德博拉·特班(Deborrah Turban) / 时启亮、陈育君、占丽 / 机械工业出版社 / 2014-1-1 / 79.00元

本书对电子学习、电子政务、基于web的供应链、协同商务等专题进行了详细的介绍,全书涵盖丰富的资料以及个案,讨论了Web 2.0环境内的产业结构、竞争变化以及对当今社会的影响。另外,本书在消费者行为、协同商务、网络安全、网络交易及客户管理管理、电子商务策略等内容上都有最新的改编,提供读者最新颖的内容,贴近当代电子商务的现实。 本书适合高等院校电子商务及相关专业的本科生、研究生及MBA学员,也可......一起来看看 《电子商务:管理与社交网络视角(原书第7版)》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具