分类：diff算法

2021
07-04

深入浅析React中diff算法

React中diff算法的理解diff算法用来计算出VirtualDOM中改变的部分，然后针对该部分进行DOM操作，而不用重新渲染整个页面，渲染整个DOM结构的过程中开销是很大的，需要浏览器对DOM结构进行重绘与回流，而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM，这样能够最小化操作DOM结构，能够最大程度上减少浏览器重绘与回流的规模。虚拟DOMdiff算法的基础是VirtualDOM，VirtualDOM是一棵以JavaScript对象作为... 继续阅读 >

2021
04-27

react diff算法源码解析

React中Diff算法又称为调和算法，对应函数名为reconcileChildren，它的主要作用是标记更新过程中那些元素发生了变化，这些变化包括新增、移动、删除。过程发生在beginWork阶段，只有非初次渲染才会Diff。以前看过一些文章将Diff算法表述为两颗Fiber树的比较，这是不正确的，实际的Diff过程是一组现有的Fiber节点和新的由JSX生成的ReactElement的比较，然后生成新的Fiber节点的过程，这个过程中也会尝试复用现有Fiber节点。节点Diff... 继续阅读 >

2021
04-25

详解react应用中的DOM DIFF算法

前言对我们搞前端的来说，目前最流行的两大前端框架毫无疑问当属React和Vue，对于这两大框架，想必大家也是再熟悉不过了。然而，这两大框架无一例外的全部放弃使用传统的DOM技术，却采用了以JS为基础的VirtualDOM技术，也可称作虚拟DOM。所以，到底什么是VirtualDOM？两大热门框架全部使用VirtualDOM的原因又是什么？接下来让我这个搞前端的人来好好地为您讲解一下DOMDIFF算法的牛逼之处。什么是VirtualDOM?如字面意思所... 继续阅读 >

2021
01-08

详解Vue2的diff算法

前言双端比较算法是vue2.x采用的diff算法，本篇文章只是对双端比较算法粗略的过程进行了一下分析，具体细节还是得Vue源码，Vue的源码在这过程假设当前有两个数组arr1和arr2letarr1=[1,2,3,4,5]letarr2=[4,3,5,1,2]那么其过程有五步 arr1[0]和arr2[0]比较 arr1[arr1.length-1]和arr2[arr2.length-1]比较 arr1[0]和arr2[arr2.length-1]比较 arr1[arr1.length-1]和arr2[0]比较... 继续阅读 >

2020
10-08

详解vue3.0 diff算法的使用(超详细)

前言：随之vue3.0beta版本的发布，vue3.0正式版本相信不久就会与我们相遇。尤玉溪在直播中也说了vue3.0的新特性typescript强烈支持，proxy响应式原理，重新虚拟dom，优化diff算法性能提升等等。小编在这里仔细研究了vue3.0beta版本diff算法的源码，并希望把其中的细节和奥妙和大家一起分享。首先我们来思考一些大中厂面试中，很容易问到的问题：1什么时候用到diff算法，diff算法作用域在哪里？2diff算法是怎么运作的，到底有什么... 继续阅读 >