DOM的diffing算法

简介: DOM的diffing算法

一、简介

Vue和React渲染更新页面时,都是先在内存中生成虚拟DOM,然后进行新旧虚拟DOM的对比,最后转为页面的真实DOM渲染出来。

二、详解

准备数据

persons:[
    {id:1,name:'小张',age:18},
    {id:2,name:'小李',age:19},
]

需求,往数组中新增一个人员的信息

1、使用index(索引值)作为key

<li :key=index>{{personObj.name}}---{{personObj.age}}</li>

(1)往数组的前面添加
在这里插入图片描述
慢动作回放:

初始数据:
        {id:1,name:'小张',age:18},
        {id:2,name:'小李',age:19},
初始的虚拟DOM:
        <li key=0>小张---18<input type="text"/></li>
        <li key=1>小李---19<input type="text"/></li>

更新后的数据:
        {id:3,name:'小王',age:20},
        {id:1,name:'小张',age:18},
        {id:2,name:'小李',age:19},
更新数据后的虚拟DOM:
        <li key=0>小王---20<input type="text"/></li>
        <li key=1>小张---18<input type="text"/></li>
        <li key=2>小李---19<input type="text"/></li>


描述: 根据key值找到对应的节点进行对比,找到key为0的,发现里面的内容不一样,会递归查找,然后对比两个Input框,这两个input节点一样,就会把原来虚拟DOM所对应的真实DOM给新添加的数据用,由于两个input框的虚拟DOM一样,但是虚拟DOM最后会转为真实DOM放到页面中,真实DOM能往里输入东西,有.value值,就会残留原来的信息,所以会发生错乱,小张的信息就会放到小王后面,依次类推。
小结: 往数组前面添加数据,破坏了数组原有的结构,数据所对应的index发生了变化,把index作为key值进行新旧虚拟DOM的对比,如果没有输入类的DOM会出现效率上的问题,如果存在输入类的DOM,则会发生错乱的问题。
(2)往数组的后面添加
在这里插入图片描述小结: 往数组后面添加数据,没有破坏数组原有的结构,不会影响页面的更新

2、使用id(数据的唯一标识)作为key

<li :key={{personObj.id}}>{{personObj.name}}---{{personObj.age}}</li>

在这里插入图片描述

慢动作回放----使用id唯一标识作为key
    初始数据:
            {id:1,name:'小张',age:18},
            {id:2,name:'小李',age:19},
    初始的虚拟DOM:
            <li key=1>小张---18<input type="text"/></li>
            <li key=2>小李---19<input type="text"/></li>
    更新后的数据:
            {id:3,name:'小王',age:20},
            {id:1,name:'小张',age:18},
            {id:2,name:'小李',age:19},
    更新数据后的虚拟DOM:
            <li key=3>小王---20<input type="text"/></li>
            <li key=1>小张---18<input type="text"/></li>
            <li key=2>小李---19<input type="text"/></li>

在这里插入图片描述
描述: 根据key值找到对应的节点进行对比,第一个key为3,发现之前没有这个节点,就会把这个虚拟DOM直接生成真实DOM,然后对比key为1和2的,发现里面的内容一样,就会把原来虚拟DOM所对应的真实DOM直接拿过来渲染,原来输入框中残留的信息也没有错乱。
小结: 不管是往数组前面还是后面添加数据,虽然破坏了数组原有的结构,数据所对应的index发生变化,但把id作为key值进行新旧虚拟DOM的对比,id所对应的原始数据不会发生错乱,所以不会影响页面的更新。

三、总结

1、虚拟DOM中key的作用:
1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。
2). 详细的说: 当状态中的数据发生变化时,会根据【新数据】生成【新的虚拟DOM】,
随后进行【新虚拟DOM】与【旧虚拟DOM】的diff比较,比较规则如下:

  • 旧虚拟DOM中找到了与新虚拟DOM相同的key:

(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM
(2).若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM

  • 旧虚拟DOM中未找到与新虚拟DOM相同的key

根据数据创建新的真实DOM,随后渲染到到页面

2、用index作为key可能会引发的问题:
(1)若对数据进行:逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
(2)如果结构中还包含输入类的DOM:
会产生错误DOM更新 ==> 界面有问题。
(3)注意!如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。
3、开发中如何选择key?:
(1)最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
一般从后台拿到的数据都会有这个唯一标识的,如果数据是自己手动添加的,可以使用随机数或者日期对象等可以产生唯一值的东西作为key,还可以借助一些第三方工具比如nanoid等很多方法。
(2)如果确定只是简单的展示数据,用index也是可以的。

相关文章
|
1月前
|
JavaScript 前端开发 算法
MVVM模型,虚拟DOM和diff算法
1.MVVM是前端开发领域当中非常流行的开发思想。(一种架构模式)目前前端的大部分主流框架都实现了这个MVVM思想,例如Vue,React等2.虽然Vue没有完全遵循MVVM模型,但是Vue的设计也受到了它的启发。Vue框架基本上也是符合MVVM思想的 3.MVVM模型当中尝到了Model和View进行了分离,为什么要分离?
|
1月前
|
JavaScript 前端开发 算法
React中的DOM diff算法是如何工作的
React的DOM diff算法通过对比新旧虚拟DOM树找到最小更新策略,提高组件更新效率。它生成并比较虚拟DOM,按类型、属性和&quot;key&quot;逐节点检查。不同类型节点直接替换,属性不同则更新属性,相同则递归比较子节点。确定DOM操作后批量执行,减少对真实DOM的访问,优化性能。然而,在复杂场景下可能有性能问题,可借助shouldComponentUpdate、memo或PureComponent等进行优化。
|
1月前
|
JavaScript 算法 前端开发
【专栏】前端开发中的slot算法和shadow DOM,两者提供更灵活、高效和模块化的开发方式
【4月更文挑战第29天】本文探讨了前端开发中的slot算法和shadow DOM,两者提供更灵活、高效和模块化的开发方式。slot算法允许在组件中定义插槽位置,实现内容的灵活插入和复用,提高代码可读性和维护性。shadow DOM则通过封装DOM子树,实现样式和事件的隔离,增强组件独立性和安全性。这两种技术常应用于组件开发、页面布局和主题定制,但也面临兼容性、学习曲线和性能优化等挑战。理解并掌握它们能提升开发效率和用户体验。
|
1月前
|
JavaScript 算法 前端开发
什么是虚拟DOM?什么是diff算法?
什么是虚拟DOM?什么是diff算法?
10 0
|
1月前
|
缓存 JavaScript 算法
Vue.js中的diff算法:让虚拟DOM更高效
Vue.js中的diff算法:让虚拟DOM更高效
|
1月前
|
JavaScript 算法 前端开发
解密Vue 2的Diff算法:如何实现高效的DOM更新?
解密Vue 2的Diff算法:如何实现高效的DOM更新?
|
1月前
|
JavaScript 算法 前端开发
第十四章 DOM的Diff算法与key
第十四章 DOM的Diff算法与key
|
1月前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
6天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
7 2
|
7天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改