分类：Diff

2021
05-20

React Diff原理深入分析

在了解Diff前，先看下React的虚拟DOM的结构这是html结构<divid="father"><pclass="child">Iamchildp</p><divclass="child">Iamchilddiv</div></div>这是React渲染html时的js代码  自己可以在babel上试试React.createElement("div",{id:"father"},React.createElement("p",{class:"child"},"Iamchildp"),React.createElement("div",{class:"child"},"Iamchilddiv"));... 继续阅读 >

2021
04-27

vue diff算法全解析

前言我们知道Vue使用的是虚拟DOM去减少对真实DOM的操作次数，来提升页面运行的效率。今天我们来看看当页面的数据改变的时候，Vue是如何来更新DOM的。Vue和React在更新dom时，使用的算法基本相同，都是基于snabbdom。当页面上的数据发生变化时，Vue不会立即渲染。而是经过diff算法，判断出哪些是不需要变化的，哪些是需要变化更新的，只需要更新那些需要更新的DOM就可以了，这样就减少了很多不必要的DOM操作，大... 继续阅读 >

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

如何巧用vimdiff来替代原始的svn diff和git diff(效率提升)

有许多命令行选手在linux下开发的时候会经常遇到一个问题，无论是svn还是git，提供的原始diff功能太难以阅读，我们希望的是能够命令行下也能展示sidebyside的对比模式，而不是inline的方式，这里我们提供了一个小技巧来解决眼睛疼的问题。1.Vimdiff替代svndiff1）编写脚本执行vimdiffwrap.sh，添加如下内容（输入:i，然后右键复制原文，粘接内容到终端）：#!/bin/sh#过滤掉svndiff的前五个命令行参数shift5#使用vimdiff比较... 继续阅读 >

2020
10-08

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

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