「diff算法java」diff算法是否直接操作dom

今天给各位分享diff算法java的知识，其中也会对diff算法是否直接操作dom进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、diff 算法原理
• 2、diff算法是什么？
• 3、面试中的网红Vue源码解析之虚拟DOM，你知多少呢？深入解读diff算法
• 4、web前端diff 算法深入一下？
• 5、Diff 算法的原理是什么，怎样学习和理解

diff 算法原理

1、旧数组为空，将新数组的剩余元素 插入 ；

2、新数组为空，将旧数组的剩余元素 删除 ；

3、新、旧数组都不为空，执行第二步。

数组p：与新数组的长度相同，与新数组是相互映射关系，

元素在旧数组中的索引 存储在 元素在新数组中的位置

1、找到 P 数组的 最长递增子序列 来做动态规划，新集合中不属于这个序列的将会被移动。

2、同时尾部遍历新数组和 LIS 序列，查看元素的位置是否能与 LIS 序列的任何一个值匹配：

a：可以匹配，保留位置；

b：不能匹配，移动到到前面；

c：找不到，插入元素；

diff算法是什么？

diff算法是虚拟DOM中采用的算法。

把树形结构按照层级分解，只比较同级元素。不同层级的节点只有创建和删除操作。给列表结构的每个单元添加唯一的key属性，方便比较。

相关信息：

React只会匹配相同class的component。合并操作，调用component 的 setState 方法的时候，React将其标记为dirty。

到每一个事件循环结束，React 检查所有标记 dirty 的 component 重新绘制。选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

面试中的网红Vue源码解析之虚拟DOM，你知多少呢？深入解读diff算法

众所周知，在前端的面试中，面试官非常爱考dom和diff算法。比如，可能会出现在以下场景

滴滴滴，面试官发来一个面试邀请。接受邀请📞

我们都知道， key 的作用在前端的面试是一道很普遍的题目，但是呢，很多时候我们都只浮于知识的表面，而没有去深挖其原理所在，这个时候我们的竞争力就在这被拉下了。所以呢，深入学习原理对于提升自身的核心竞争力是一个必不可少的过程。

在接下来的这篇文章中，我们将讲解面试中很爱考的虚拟DOM以及其背后的diff算法。 请认真阅读本文～文末有学习资源免费共享！！！

虚拟DOM是用JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性。本质上是JS 和 DOM 之间的一个映射缓存。

要点：虚拟 DOM 是 JS 对象；虚拟 DOM 是对真实 DOM 的描述。

diff发生在虚拟DOM上。diff算法是在新虚拟DOM和老虚拟DOM进行diff（精细化比对），实现最小量更新，最后反映到真正的DOM上。

我们前面知道diff算法发生在虚拟DOM上，而虚拟DOM是如何实现的呢？实际上虚拟DOM是有一个个虚拟节点组成。

h函数用来产生虚拟节点（vnode）。虚拟节点有如下的属性：

1）sel： 标签类型，例如 p、div；

2）data： 标签上的数据，例如 style、class、data-*；

3）children ：子节点；

4） text： 文本内容；

5）elm：虚拟节点绑定的真实 DOM 节点；

通过h函数的嵌套，从而得到虚拟DOM树。

我们编写了一个低配版的h函数，必须传入3个参数，重载较弱。

形态1：h('div', {}, '文字')

形态2：h('div', {}, [])

形态3：h('div', {}, h())

首先定义vnode节点，实际上就是把传入的参数合成对象返回。

[图片上传失败...(image-7a9966-1624019394657)]

然后编写h函数，根据第三个参数的不同进行不同的响应。

当我们进行比较的过程中，我们采用的4种命中查找策略：

1）新前与旧前：命中则指针同时往后移动。

2）新后与旧后：命中则指针同时往前移动。

3）新后与旧前：命中则涉及节点移动，那么新后指向的节点，移到 旧后之后 。

4）新前与旧后：命中则涉及节点移动，那么新前指向的节点，移到 旧前之前 。

命中上述4种一种就不在命中判断了，如果没有命中，就需要循环来寻找，移动到旧前之前。直到while(新前=新后旧前=就后)不成立则完成。

如果是新节点先循环完毕，如果老节点中还有剩余节点(旧前和旧后指针中间的节点)，说明他们是要被删除的节点。

如果是旧节点先循环完毕，说明新节点中有要插入的节点。

1.什么是Virtual DOM 和Snabbdom

2.手写底层源码h函数

3.感受Vue核心算法之diff算法

4.snabbdom之核心h函数的工作原理

1、零基础入门或者有一定基础的同学、大中院校学生

2、在职从事相关工作1-2年以及打算转行前端的朋友

3、对前端开发有兴趣人群

web前端diff 算法深入一下？

有同学问：能否详细说一下 diff 算法。

详细的说，请阅读这篇文章，有疑问的地方欢迎留言一起讨论。

因为 diff 算法是 vue2.x ， vue3.x 以及 react 中关键核心点，理解 diff 算法，更有助于理解各个框架本质。

说到「diff 算法」，不得不说「虚拟 Dom」，因为这两个息息相关。

比如：

等等

我们先来说说虚拟 Dom，就是通过 JS 模拟实现 DOM ，接下来难点就是如何判断旧对象和新对象之间的差异。

Dom 是多叉树结构，如果需要完整的对比两棵树的差异，那么算法的时间复杂度 O(n ^ 3)，这个复杂度很难让人接收，尤其在 n 很大的情况下，于是 React 团队优化了算法，实现了 O(n) 的复杂度来对比差异。

实现 O(n) 复杂度的关键就是只对比同层的节点，而不是跨层对比，这也是考虑到在实际业务中很少会去跨层的移动 DOM 元素。

虚拟 DOM 差异算法的步骤分为 2 步：

实际 diff 算法比较中，节点比较主要有 5 种规则的比较

部分源码 如下：

在 reconcileChildren 函数的入参中

diff 的两个主体是：oldFiber（current.child）和 newChildren（nextChildren，新的 ReactElement），它们是两个不一样的数据结构。

部分源码

很多时候手工优化 dom 确实会比 virtual dom 效率高，对于比较简单的 dom 结构用手工优化没有问题，但当页面结构很庞大，结构很复杂时，手工优化会花去大量时间，而且可维护性也不高，不能保证每个人都有手工优化的能力。至此，virtual dom 的解决方案应运而生。

virtual dom 是“解决过多的操作 dom 影响性能”的一种解决方案。

virtual dom 很多时候都不是最优的操作，但它具有普适性，在效率、可维护性之间达到平衡。

virutal dom 的意义：

vue2.x 的 diff 位于 patch.js 文件中，该算法来源于 snabbdom，复杂度为 O(n)。了解 diff 过程可以让我们更高效的使用框架。react 的 diff 其实和 vue 的 diff 大同小异。

最大特点：比较只会在同层级进行, 不会跨层级比较。

对比之前和之后：可能期望将 直接移动到

的后边，这是最优的操作。

但是实际的 diff 操作是：

vue 中也使用 diff 算法，有必要了解一下 Vue 是如何工作的。通过这个问题，我们可以很好的掌握，diff 算法在整个编译过程中，哪个环节，做了哪些操作，然后使用 diff 算法后输出什么？

解释：

mount 函数主要是获取 template，然后进入 compileToFunctions 函数。

compileToFunction 函数主要是将 template 编译成 render 函数。首先读取缓存，没有缓存就调用 compile 方法拿到 render 函数的字符串形式，在通过 new Function 的方式生成 render 函数。

compile 函数将 template 编译成 render 函数的字符串形式。后面我们主要讲解 render

完成 render 方法生成后，会进入到 mount 进行 DOM 更新。该方法核心逻辑如下：

上面提到的 compile 就是将 template 编译成 render 函数的字符串形式。核心代码如下：

compile 这个函数主要有三个步骤组成：

分别输出一个包含

parse 函数：主要功能是 将 template 字符串解析成 AST（抽象语法树） 。前面定义的 ASTElement 的数据结构，parse 函数就是将 template 里的结构（指令，属性，标签） 转换为 AST 形式存进 ASTElement 中，最后解析生成 AST。

optimize 函数（src/compiler/optomizer.js）:主要功能是 标记静态节点 。后面 patch 过程中对比新旧 VNode 树形结构做优化。被标记为 static 的节点在后面的 diff 算法中会被直接忽略，不做详细比较。

generate 函数（src/compiler/codegen/index.js）:主要功能 根据 AST 结构拼接生成 render 函数的字符串 。

其中 genElement 函数（src/compiler/codgen/index.js）是根据 AST 的属性调用不同的方法生成字符串返回。

总之：

就是 compile 函数中三个核心步骤介绍，

patch 函数 就是新旧 VNode 对比的 diff 函数，主要是为了优化 dom，通过算法使操作 dom 的行为降低到最低， diff 算法来源于 snabbdom，是 VDOM 思想的核心。snabbdom 的算法是为了 DOM 操作跨级增删节点较少的这一目标进行优化， 它只会在同层级进行，不会跨层级比较。

总的来说：

在创建 VNode 就确定类型，以及在 mount/patch 的过程中采用位运算来判断一个 VNode 的类型，在这个优化的基础上再配合 Diff 算法，性能得到提升。

可以看一下 vue3.x 的源码：

对 oldFiber 和新的 ReactElement 节点的比对，将会生成新的 fiber 节点，同时标记上 effectTag，这些 fiber 会被连到 workInProgress 树中，作为新的 WIP 节点。树的结构因此被一点点地确定，而新的 workInProgress 节点也基本定型。在 diff 过后，workInProgress 节点的 beginWork 节点就完成了，接下来会进入 completeWork 阶段。

snabbdom 算法：

定位：一个专注于简单性、模块化、强大功能和性能的虚拟 DOM 库。

snabbdom 中定义 Vnode 的类型()

init 函数的地址：

init() 函数接收一个模块数组 modules 和可选的 domApi 对象作为参数，返回一个函数，即 patch() 函数。

domApi 对象的接口包含了很多 DOM 操作的方法。

源码：

源码：

h() 函数接收多种参数，其中必须有一个 sel 参数，作用是将节点内容挂载到该容器中，并返回一个新 VNode。

在 vue2.x 不是完全 snabbdom 算法，而是基于 vue 的场景进行了一些修改和优化，主要体现在判断 key 和 diff 部分。

1、在 snabbdom 中 通过 key 和 sel 就判断是否为同一节点，那么在 vue 中，增加了一些判断 在满足 key 相等的同时会判断，tag 名称是否一致，是否为注释节点，是否为异步节点，或者为 input 时候类型是否相同等。

2、diff 差异，patchVnode 是对比模版变化的函数，可能会用到 diff 也可能直接更新。

Diff 算法的原理是什么，怎样学习和理解

建议千万不要一开始就看《算法导论》，这本书有太多关于算法的数学证明（如果你喜欢这种，那么你就看这本）

我强烈你看看这本：算法（第4版） (豆瓣)，作者是高德纳的学生：塞奇威克 (Robert Sedgewick)

去年我在准备校招面试的时候偶然发现这本书，我越看越着迷，书中算法代码主要是用Java编写，里面有大量的图来让你明白例如：排序，查找，树和图的算法运行过程。

这本书的目录编排也很清晰，他就告诉你算法主要就可以分为：排序，查找，图和字符串。从这4个方面可以演化出很多算法。

我觉得最关键是：这本书的作者不但是在告诉你what，而且告诉你why（分析各种算法的优缺点）

。

diff算法java的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于diff算法是否直接操作dom、diff算法java的信息别忘了在本站进行查找喔。