什么是diff算法？

diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。

简单来说Diff算法就是在虚拟DOM树从上至下进行同层比对，如果上层已经不同了，那么下面的DOM全部重新渲染。这样的好处是算法简单，减少比对次数，加快算法完成速度。

有两个特点

比较只会在同层级进行, 不会跨层级比较
在diff比较的过程中，循环从两边向中间比较

diff算法的步骤
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异
把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch)，视图就更新了

什么是diff算法？相关推荐

Vue源码终笔-VNode更新与diff算法初探
写完这个就差不多了,准备干新项目了. 确实挺不擅长写东西,感觉都是罗列代码写点注释的感觉,这篇就简单阐述一下数据变动时DOM是如何更新的,主要讲解下其中的diff算法. 先来个正常的html模板: & ...
diff算法_React源码揭秘(三)：Diff算法详解
编者按:本文作者奇舞团前端开发工程师苏畅. 代码参照React 16.13.1 什么是Diff 在前两篇文章中我们分别介绍了 React 的首屏渲染流程1和组件更新流程2,其中首屏渲染会渲染一整棵 ...
关于react diff 算法（译文）
React是由facebook开发,用于构建用户界面的js类库,以提升性能为设计理念.在本文中,我将为大家介绍在React中的diff算法,以及它的渲染机制,以便于你能够更好的优化你的程序. Diff ...
React Diff 算法
React介绍 React是Facebook开发的一款JS库,用于构建用户界面的类库. 它采用声明式范例,可以传递声明代码,最大限度地减少与DOM的交互. 特点: 声明式设计:React采用声明范式, ...
做diff_Vue3.0时代你必须了解的：diff算法原理和优化
关注前端公众号 [前端每日一博] 前言面试官: 你知道 Vue3.0 Object.difineProperty和vue3.0的proxy的区别吗? 你知道 Vue3.0 diff算法原理和它有什么 ...
详解vue的diff算法
前言目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,一起来get吧. 先来了解几个点... 1. 当数据发生变化时,vue是怎么更新节点的? 要知道渲染真实 ...
JS每日一题:Vue中的diff算法？
20190125 Vue中的diff算法? 概念: diff算法是一种优化手段,将前后两个模块进行差异对比,修补(更新)差异的过程叫做patch(打补丁) 为什么vue,react这些框架中都会有di ...
虚拟DOM和Diff算法 - 入门级
什么是虚拟Dom 我们知道我们平时的页面都是有很多Dom组成,那虚拟Dom(virtual dom)到底是什么,简单来讲,就是将真实的dom节点用JavaScript来模拟出来,而Dom变化的对比,放 ...
理解Vue 2.5的Diff算法
DOM"天生就慢",所以前端各大框架都提供了对DOM操作进行优化的办法,Angular中的是脏值检查,React首先提出了Virtual Dom,Vue2.0也加入了Virtual ...
ReactiveNative学习之Diff算法
React 源码剖析系列 - 不可思议的 react diff 深入浅出React(四):虚拟DOM Diff算法解析 React diff 算法总结链接引用的文章 React出于性能的考虑,为了避 ...

什么是diff算法？

什么是diff算法？

简单来说Diff算法就是在虚拟DOM树从上至下进行同层比对，如果上层已经不同了，那么下面的DOM全部重新渲染。这样的好处是算法简单，减少比对次数，加快算法完成速度。

有两个特点

什么是diff算法？相关推荐

最新文章

热门文章