文件名称：leetcode下载-DOM-Diff:DOM-Diff
文件大小：12.33MB
文件格式：ZIP
更新时间：2024-07-19 14:12:09
系统开源
leetcode下载 前言 本文源码收录于 仓库，文章内容按照一位老师视频学习而来（详情见文本末尾哈），每一个字都是自己手动敲出来的，算是给自己的一个梳理和总结，下面，我们一起来学习一下 dom diff 吧。 DOM Diff dom diff 其实就是对比两个虚拟节点，然后对比它们的差异。然后再对应真实 dom 上进行一个打补丁操作。我们的目的就是找到其中的差异，然后用最小的代价来操作 dom。因为操作 dom 相对而言比较耗性能。 而对于虚拟节点呢，我们可以简单理解为普通对象。就是将真实节点用对象的方式模拟出来，通过比较两个新老虚拟节点，得到彼此的差异，形成一个补丁，最后再与真实的 dom 进行匹配，将这些补丁打到真实 dom 上去，最终，我们还是操作了原来的真实 dom，但是我们是用了差异化结果的 最小的代价 来操作的。 平级对比 上文我们讲解了虚拟节点可以简单理解为普通对象，那么我们来用图示来看一看，得到其中的一个特点： 左边就是旧的虚拟节点，而右边是新的虚拟节点。我们来看看有什么变化： 第一层， ul 底下的 class 由 list 变为了 wrap 第二层，第三个孩子