Visual DOM && diff算法实现

最新推荐文章于 2022-10-14 01:25:56 发布
最新推荐文章于 2022-10-14 01:25:56 发布
阅读量2.3k 收藏
点赞数
分类专栏： vue.js 文章标签： dom diff
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caoxinhui521/article/details/76998982
版权

使用document.CreateElement 和 document.CreateTextNode创建的就是真实节点。

分析diff

比较只会在同层级进行, 不会跨层级比较。
同层级比较

<!-- 之前 -->
<div>           <!-- 层级1 -->
  <p>            <!-- 层级2 -->
    <b> aoy </b>   <!-- 层级3 -->   
    <span>diff</Span>
  </P> 
</div>

<!-- 之后 -->
<div>            <!-- 层级1 -->
  <p>             <!-- 层级2 -->
      <b> aoy </b>        <!-- 层级3 -->
  </p>
  <span>diff</Span>
</div>

我们可能期望将直接移动到

的后边，这是最优的操作。但是实际的diff操作是移除

里的在创建一个新的插到

的后边。因为新加的在层级2，旧的在层级3，属于不同层级的比较。

源码分析

diff的过程就是调用patch函数，就像打补丁一样修改真实dom。

//vnode和oldVnode，也就是新旧两个虚拟节点
function patch (oldVnode, vnode) {
    if (sameVnode(oldVnode, vnode)) {
        patchVnode(oldVnode, vnode)
    } else {
        const oEl = oldVnode.el
        let parentEle = api.parentNode(oEl)
        createEle(vnode)
        if (parentEle !== null) {
            api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl))
            api.removeChild(parentEle, oldVnode.el)
            oldVnode = null
        }
    }
    return vnode
}
// body下的 <div id="v" class="classA"><div> 对应的 oldVnode 就是

{
//el属性引用的是此 virtual dom对应的真实dom，patch的vnode参数的el最初是null，因为patch之前它还没有对应的真实dom。
  el:  div  //对真实的节点的引用，本例中就是document.querySelector('#id.classA')
  tagName: 'DIV',   //节点的标签
  sel: 'div#v.classA'  //节点的选择器
  data: null,       // 一个存储节点属性的对象，对应节点的el[prop]属性，例如onclick , style
  children: [], //存储子节点的数组，每个子节点也是vnode结构
  text: null,    //如果是文本节点，对应文本节点的textContent，否则为null
}
el=div, //对真实的节点的引用，本例中就是document.querySelector('#id.classA')
    tagName='DIV',//节点的标签
    sel='div#v.classA' //节点的选择器
data=null // 一个存储节点属性的对象，对应节点的el[prop]属性，例如onclick , style
chilren=[]//存储子节点的数组，每个子节点也是vnode结构
text=null,    //如果是文本节点，对应文本节点的textContent，否则为null
//    el属性引用的是此 virtual dom对应的真实dom，patch的vnode参数的el最初是null，因为patch之前它还没有对应的真实dom。

function patch (oldVnode, vnode) {
    if (sameVnode(oldVnode, vnode)) {
        patchVnode(oldVnode, vnode)
    } else {
        //取得oldvnode.el的父节点，parentEle是真实dom
        // createEle(vnode)会为vnode创建它的真实dom，令vnode.el =真实dom
        // parentEle将新的dom插入，移除旧的dom
        const oEl = oldVnode.el
        let parentEle = api.parentNode(oEl)
        createEle(vnode)
        if (parentEle !== null) {
            api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl))
            api.removeChild(parentEle, oldVnode.el)
            oldVnode = null
        }
    }
    return vnode
}
function sameVnode(oldVnode, vnode){
    return vnode.key === oldVnode.key && vnode.sel === oldVnode.sel
}

//两个节点值得比较时，会调用patchVnode函数
function patchVnode (oldVnode, vnode){
    //让vnode.el引用到现在的真实dom，当el修改时，vnode.el会同步变化。
    const el = vnode.el = oldVnode.el
    let i, oldCh = oldVnode.children, ch = vnode.children
    if (oldVnode === vnode) return
    if (oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text) {
        api.setTextContent(el, vnode.text)
    }else {
        updateEle(el, vnode, oldVnode)
        if (oldCh && ch && oldCh !== ch) {
            updateChildren(el, oldCh, ch)
        }else if (ch){
            createEle(vnode) //create el's children dom
        }else if (oldCh){
            api.removeChildren(el)
        }
    }
}
function updateChildren (parentElm, oldCh, newCh) {
    let oldStartIdx = 0, newStartIdx = 0
    let oldEndIdx = oldCh.length - 1
    let oldStartVnode = oldCh[0]
    let oldEndVnode = oldCh[oldEndIdx]
    let newEndIdx = newCh.length - 1
    let newStartVnode = newCh[0]
    let newEndVnode = newCh[newEndIdx]
    let oldKeyToIdx
    let idxInOld
    let elmToMove
    let before
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
        if (oldStartVnode == null) {   //对于vnode.key的比较，会把oldVnode = null
            oldStartVnode = oldCh[++oldStartIdx]
        }else if (oldEndVnode == null) {
            oldEndVnode = oldCh[--oldEndIdx]
        }else if (newStartVnode == null) {
            newStartVnode = newCh[++newStartIdx]
        }else if (newEndVnode == null) {
            newEndVnode = newCh[--newEndIdx]
        }else if (sameVnode(oldStartVnode, newStartVnode)) {
            patchVnode(oldStartVnode, newStartVnode)
            oldStartVnode = oldCh[++oldStartIdx]
            newStartVnode = newCh[++newStartIdx]
        }else if (sameVnode(oldEndVnode, newEndVnode)) {
            patchVnode(oldEndVnode, newEndVnode)
            oldEndVnode = oldCh[--oldEndIdx]
            newEndVnode = newCh[--newEndIdx]
        }else if (sameVnode(oldStartVnode, newEndVnode)) {
            patchVnode(oldStartVnode, newEndVnode)
            api.insertBefore(parentElm, oldStartVnode.el, api.nextSibling(oldEndVnode.el))
            oldStartVnode = oldCh[++oldStartIdx]
            newEndVnode = newCh[--newEndIdx]
        }else if (sameVnode(oldEndVnode, newStartVnode)) {
            patchVnode(oldEndVnode, newStartVnode)
            api.insertBefore(parentElm, oldEndVnode.el, oldStartVnode.el)
            oldEndVnode = oldCh[--oldEndIdx]
            newStartVnode = newCh[++newStartIdx]
        }else {
            // 使用key时的比较
            if (oldKeyToIdx === undefined) {
                oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) // 有key生成index表
            }
            idxInOld = oldKeyToIdx[newStartVnode.key]
            if (!idxInOld) {
                api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
                newStartVnode = newCh[++newStartIdx]
            }
            else {
                elmToMove = oldCh[idxInOld]
                if (elmToMove.sel !== newStartVnode.sel) {
                    api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
                }else {
                    patchVnode(elmToMove, newStartVnode)
                    oldCh[idxInOld] = null
                    api.insertBefore(parentElm, elmToMove.el, oldStartVnode.el)
                }
                newStartVnode = newCh[++newStartIdx]
            }
        }
    }
    if (oldStartIdx > oldEndIdx) {
        before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].el
        addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx)
    }else if (newStartIdx > newEndIdx) {
        removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
    }
}

源代码

import { api, isArray} from '../util/index'
import { createEle, updateEle } from './index'

function sameVnode(oldVnode, vnode){
    return vnode.key === oldVnode.key && vnode.sel === oldVnode.sel
}
function createKeyToOldIdx (children, beginIdx, endIdx) {
    var i, map = {}, key, ch
    for (i = beginIdx; i <= endIdx; ++i) {
        ch = children[i]
        if (ch != null) {
            key = ch.key
            if (key !== null)
                map[key] = i
        }
    }
    return map
}
function removeVnodes (parentElm, vnodes, startIdx, endIdx) {
        for ( ;startIdx <= endIdx; ++startIdx) {
            var ch = vnodes[startIdx]
            if (ch != null) {
                    api.removeChild(parentElm, ch.el)
            }
        }
    }
function addVnodes (parentElm, before, vnodes, startIdx, endIdx) {
        for ( ;startIdx <= endIdx; ++startIdx) {
            var ch = vnodes[startIdx]
            if (ch != null) {
                api.insertBefore(parentElm, createEle(ch).el, before)
            }
        }
    }    
function patchVnode (oldVnode, vnode) {
    const el = vnode.el = oldVnode.el
    let i, oldCh = oldVnode.children, ch = vnode.children
    if (oldVnode === vnode) return
    if (oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text) {
        api.setTextContent(el, vnode.text)
    }else {
        updateEle(el, vnode, oldVnode)
        if (oldCh && ch && oldCh !== ch) {
            updateChildren(el, oldCh, ch)
        }else if (ch){
            createEle(vnode) //create el's children dom
        }else if (oldCh){
            api.removeChildren(el)
        }
    }
}

function updateChildren (parentElm, oldCh, newCh) {
    let oldStartIdx = 0, newStartIdx = 0
    let oldEndIdx = oldCh.length - 1
    let oldStartVnode = oldCh[0]
    let oldEndVnode = oldCh[oldEndIdx]
    let newEndIdx = newCh.length - 1
    let newStartVnode = newCh[0]
    let newEndVnode = newCh[newEndIdx]
    let oldKeyToIdx
    let idxInOld
    let elmToMove
    let before
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
            if (oldStartVnode == null) {
                oldStartVnode = oldCh[++oldStartIdx] // Vnode might have been moved left
            }else if (oldEndVnode == null) {
                oldEndVnode = oldCh[--oldEndIdx]
            }else if (newStartVnode == null) {
                newStartVnode = newCh[++newStartIdx]
            }else if (newEndVnode == null) {
                newEndVnode = newCh[--newEndIdx]
            }else if (sameVnode(oldStartVnode, newStartVnode)) {
                patchVnode(oldStartVnode, newStartVnode)
                oldStartVnode = oldCh[++oldStartIdx]
                newStartVnode = newCh[++newStartIdx]
            }else if (sameVnode(oldEndVnode, newEndVnode)) {
                patchVnode(oldEndVnode, newEndVnode)
                oldEndVnode = oldCh[--oldEndIdx]
                newEndVnode = newCh[--newEndIdx]
            }else if (sameVnode(oldStartVnode, newEndVnode)) {
                patchVnode(oldStartVnode, newEndVnode)
                api.insertBefore(parentElm, oldStartVnode.el, api.nextSibling(oldEndVnode.el))
                oldStartVnode = oldCh[++oldStartIdx]
                newEndVnode = newCh[--newEndIdx]
            }else if (sameVnode(oldEndVnode, newStartVnode)) {
                patchVnode(oldEndVnode, newStartVnode)
                api.insertBefore(parentElm, oldEndVnode.el, oldStartVnode.el)
                oldEndVnode = oldCh[--oldEndIdx]
                newStartVnode = newCh[++newStartIdx]
            }else {
                if (oldKeyToIdx === undefined) {
                    oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
                }
                idxInOld = oldKeyToIdx[newStartVnode.key]
                if (!idxInOld) {
                    api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
                    newStartVnode = newCh[++newStartIdx]
                }
                else {
                    elmToMove = oldCh[idxInOld]
                    if (elmToMove.sel !== newStartVnode.sel) {
                        api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
                    }else {
                        patchVnode(elmToMove, newStartVnode)
                        oldCh[idxInOld] = null
                        api.insertBefore(parentElm, elmToMove.el, oldStartVnode.el)
                    }
                    newStartVnode = newCh[++newStartIdx]
                }
            }
        }
        if (oldStartIdx > oldEndIdx) {
            before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].el
            addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx)
        }else if (newStartIdx > newEndIdx) {
            removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
        }
}

export function patch (oldVnode, vnode) {
    if (sameVnode(oldVnode, vnode)) {
        patchVnode(oldVnode, vnode)
    } else {
        const oEl = oldVnode.el
        let parentEle = api.parentNode(oEl)
        createEle(vnode)
        if (parentEle !== null) {
            api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl))
            api.removeChild(parentEle, oldVnode.el)
            oldVnode = null
        }
    }
    return vnode
}

参考文章地址：http://web.jobbole.com/84631

奔跑的前端er
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
大前端学习 -- 虚拟 DOM 和 Diff 算法 学习笔记
爱玲姐姐的博客
09-29 1140
虚拟 DOM 和 Diff 算法 Virtual DOM的实现原理 一、Virtual DOM介绍 1. 什么是Virtual DOM Virtual DOM（虚拟DOM），是由普通的JS对象描述DOM对象，因为不是真实的DOM对象，所以叫做Virtual DOM 真实的DOM成员 非常非常多，所以创建一个DOM对象的成本非常高 可以通过Virtual DOM来描述真实DDOM，示例： { sel: 'div', data: {}, text: 'Hello Virtual DOM'
diff算法 阮一峰_JavaScript实现十大排序算法
weixin_42342626的博客
01-08 2255
一 : 冒泡排序人们开始学习排序算法时，通常都先学冒泡算法，因为它在所有排序算法中最简单。然而， 从运行时间的角度来看，冒泡排序是最差的一个，接下来你会知晓原因冒泡排序比较所有相邻的两个项，如果第一个比第二个大，则交换它们。元素项向上移动至 正确的顺序，就好像气泡升至表面一样，冒泡排序因此得名。export function bubbleSort(arr: number[]) { for ...
深入Vue2.x的虚拟dom和diff算法原理
congboer的博客
07-29 7695
本文转载于：https://blog.csdn.net/m6i37jk/article/details/78140159 作者简介：汪玉林，高级工程师，增值产品部前端Leader，目前团队负责手Q游戏中心、手Q游戏运营、手Q阅读等项目，有丰富的Web前端架构经验。 一、前言 Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom），关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双...
Object._proto_指向谁？带来的思考
zzzzzz9527的博客
12-21 1362
//由问题带来的思考 ???? 问题1.Object._proto_指向谁？ 1.Object是个啥:Object是个类，而类的本质是一个构造函数 Function 打印一下： console.log(Object.constructor) 2._proto_是个啥:_proto_可以找到很多东西的原型 prototype 补充知识： ①__proto__和constructor属性是对象所独有的； ② prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和const
Object 对象的相关方法及严格模式
m0_46404694的博客
08-29 370
一、Object 对象的相关方法 Object.getPrototypeOf方法返回参数对象的原型。这是获取原型对象的标准方法。 实例对象f的原型是构造函数的prototype属性 几种特殊对象的原型 // 空对象的原型是 Object.prototype Object.getPrototypeOf({}) === Object.prototype // true // Object.prototype 的原型是 null Object.getPrototypeOf(Object.prototype) =
Function，Object，__proto__，prototype
小嘟的博客
09-25 533
原文链接：https://juejin.cn/post/6844903930216841230#comment 彻底搞懂Function，Object，proto，prototype之间的关系 写在开篇之前：记录学习点滴，如有错误与补充，希望大家积极指正。 有4个规则一定要记住，如下 javascript中一切皆对象，函数也属于对象。 所有对象都含有__proto__。 只有函数才有prototype。 所有函数的默认原型都是Object的实例。 我们来看一下demo var o = {}; o.__pro
mySVM.rar_mySVM_svm算法实现_visual c
09-20
SVM 算法的基本实现,做向量机的参考资料
VisualBasic-使用visualbasic实现的插值排序算法.zip
最新发布
03-09
VisualBasic_使用visualbasic实现的插值排序算法
计算机几何算法与实现(Visual C++版) 源码
04-16
计算机几何算法与实现(Visual C++版) 源码 是学习Bezier曲线，三次插值曲 等几何算法理论有效的学习参考代码，例子中最精彩的三维茶壶样条实现， 可方向键进行三维 转动，非常精彩，值得认真学习，
Digital Visual Interface & TMDS Extensions
07-11
Digital Visual Interface & TMDS Extensions Silicon Image
VisualBasic-基于visualbasic实现的Barnsley-fern算法.zip
03-09
VisualBasic_基于visualbasic实现的Barnsley-fern算法
vue虚拟dom
dsh的博客
09-17 898
个人观点：有错请指正让我及时更改 虚拟dom与真正dom之间性能相差很大 借用阮一峰大大的文章 网页的生成过程，大致可以分成五步。 HTML代码转化成DOM CSS代码转化成CSSOM（CSS Object Model） 结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息） 生成布局（layout），即将所有渲染树的所有节点进行平面合成 将布局绘制（paint）在...
ES6语法：对象的新增方法——Object（__proto__属性，Object.setPrototypeOf()，Object.getPrototypeOf()）
XSL_HR的博客
10-14 587
本文是一篇关于ES6中对象的新增方法——Object的知识文章。主要内容为__proto__属性 Object.setPrototypeOf() ，Object.getPrototypeOf属性。在文章中会从理论和实践两个角度入手，代码片段可能比较多，需要耐心阅读。本文紧接ES6专栏ECMAScript(ES6)第五幕之【对象的新增方法——Object】（Object.getOwnPropertyDescriptors()）中内容，进一步学习对象的新增方法。创作不易！多多关照！！
Vue的diff算法详解和key作用(较详细)
qq_39414417的博客
03-10 1万+
在此，前言我先简单谈谈什么是dom和virtual dom，有助于diff算法的理解。 一. 那么什么是DOM？ DOM就是文档对象模型，HTML的文档document页面是一切的基础，没有它dom就无从谈起，当创建好一个页面并加载到浏览器时，DOM就悄然而生，它会把网页文档转换为一个文档对象，主要功能是处理网页内容。 在实际情况下，用户输入想要访问的网址在通过DNS解析后得到服务器地址，浏...
Object.prototype解析
Sfh的博客
07-13 3829
Object.prototype是一个对象，用于表示Object的原型对象。几乎所有的JavaScript对象都是Object的实例，其原型链上最后一个就是指向Object.prototype。一个典型的对象继承了Object.prototype的属性和方法。 也可以创建没有原型对象的对象，比如通过Object.create(null)创建，或通过Object.setPrototypeOf(obj, null)方法来改变指定对象的原型对象。 改变Object.prototype的属性和方法，或给Object
diff算法阮一峰_【重学数据结构与算法(JS)】字符串匹配算法(三)——BM算法
weixin_31076173的博客
01-29 1161
前言文章的一开头，还是要强调下字符串匹配的思路将模式串和主串进行比较从前往后比较从后往前比较2. 匹配时，比较主串和模式串的下一个位置3. 失配时,在模式串中寻找一个合适的位置如果找到，从这个位置开始与主串当前失配位置进行比较如果未找到，从模式串的头部与主串失配位置的下一个位置进行比较在主串中找到一个合适的位置，重新与模式串进行比较前面的 BF 和 KMP 算法，都是属于规规矩矩从前向后的操作，后...
虚拟dom (virtual dom)(vnode)
热门推荐
yiyueqinghui的博客
04-12 2万+
1,虚拟DOM的逻辑（React虚拟dom到真实dom发生了什么） 2，React16 更新了什么 React16中引入了Fiber这个概念，从根本上解决了由于js的单线程运行，遇到计算量较大的情况，导致动画和交互卡顿的问题。 Fiber的核心是实现了一个基于优先级和requestIdleCallback的循环任务调度算法 。它可以把一个任务拆分成多个小任务，并且可随时中止或恢复任务，同时也可以...
实现一个基本功能的diff算法(包含注释讲解）
weixin_45778415的博客
04-18 1272
为啥突然写diff算法 整天背八股文，背React对老diff算法的三种优化，突然心血来潮想要不自己去试试看diff算法，本质上还是一个深度优先遍历，说干就干查了一些资料和视频之后我就开始动手写了(下文中部分代码借鉴了·codeXiu·大佬)。 虚拟dom 首先创建两个虚拟Dom树 let newTree = createElement("div", {class: "a"}, [ createElement("div", {class: "b"}, ["dlz"])
Diff 算法
ybilss的博客
05-30 941
Diff是一种算法,类似排序算法;当数据变化之后,如果直接操作DOM,浏览器会重新渲染页面,消耗性能比较大,使用Diff算法,它不直接操作DOM,而用js对象来描述真实DOM,比较js对象是否发生变化,找到变化的位置,最小化的更新变化的位置,提高了性能, 它的执行过程是:在比较开始时首先对新老节点数组的开始和结尾节点设置标记索引，遍历比较时会出现四种情况: a.oldStartVnode/newStartVnode比较:旧节点和新节点从第一个开始进行比较 b.oldEndV...
visualstudio实现加窗sinc插值算法
05-23
下面是使用 Visual Studio 实现加窗 Sinc 插值算法的示例代码： ```c++ #include #include using namespace std; // 定义 sinc 函数 double sinc(double x) { if (x == 0) return 1.0; return sin(x) / x; } ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值