Vue源码阅读之diff算法

虚拟dom

  1. 虚拟dom解决了什么问题
  • 首先是正常的一个真实dom拥有的属性非常多,还拥有很多dom操作的方法
  • 其次数据更新的时候如果整个画面重新渲染会带来很大的性能开销,非常慢,而且很多没变化的部分都属于无用功,还不能保存数据更新前的状态
  • 用新数据生成的虚拟dom跟上次旧的虚拟dom做对比,只更新发生变化的部分
  • diff算法也是消耗性能的,所以如果我们知道要修改那个dom,直接手动操作应该是最快的,这样做是为了让我们更关注数据的变化,而不需要关心dom操作
  1. Vue中虚拟dom分类:
注释节点 
文本节点
克隆节点(代表本节点是克隆来的)
元素节点
组件节点 
函数式组件节点
  1. VNode作用,就是将template编译成VNode缓存下来,数据变化生成的VNode与之前的VNode树作对比,将有差异的渲染成真实的Dom插入到视图中,最终一次性视图更新

diff思路

  • 思考:有一组新节点一组旧节点,这个时候数组跟数组间for循环对比时间复杂度是n^2,假如每个节点又有子节点这个复杂度就非常大了,因此不应该做完全对比
  1. 只修改变动的地方不做整个布局的调整
  2. 只做同层比较,不会跨级比较,算法是一个O(n)的算法
  3. 不值得比较的节点直接用新的替换旧的,如果两个节点一样才会去比较其子节点,假如第一层不一样就用新的替换旧的(注意diff算法从来不是最优解,只是一个时间跟节点利用率的平衡方案)

以下代码均在src/core/vdom/patch.js中

patch(oldVnode, vnode) 函数

  1. 根据界面生成Vnode,然后用这个新的Vnode对比旧的Vnode,用新的Vnode去更新真实的dom树
  2. 根据Vnode递归创建真实dom节点,从上到下,先创建子节点后插到父节点上,vnode.elm为真实dom
  3. 创建节点:新的VNode中有而旧的oldVNode中没有,就在旧的oldVNode中创建。
  4. 删除节点:新的VNode中没有而旧的oldVNode中有,就从旧的oldVNode中删除。
  5. 更新节点:新的VNode和旧的oldVNode中都有,就以新的VNode为准,更新旧的oldVNode

updateChildren子节点算法

image
  1. 新前跟旧前作对比,如果节点相同就做patchVnode的操作
  2. 新后跟旧后作对比,如果节点相同就做patchVnode的操作
  3. 旧前跟新后做对比,如果相同就patchVnode这两个节点,然后把真实dom旧前节点移动到oldChilren中所有未处理节点之后,这里做的是真实dom操作


    image
  4. 旧后跟先前做对比,如果相同就patchVnode这两个节点,然后把旧后节点移动到oldChilren中所有未处理节点之前


    image
  5. 假如不属于以上任何一种,就在旧节点中查找当前节点,找不到就创建新节点,找到了假如相同就更新节点,相同key不同元素就当初新节点处理
  6. 如果oldStartIdx > oldEndIdx,把[newStartIdx, newEndIdx]之间的所有节点都插入到DOM中
  7. 如果newStartIdx > newEndIdx,把[oldStartIdx, oldEndIdx]之间的所有节点都删除
function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    debugger
    let oldStartIdx = 0
    let 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, idxInOld, vnodeToMove, refElm

    // removeOnly is a special flag used only by <transition-group>
    // to ensure removed elements stay in correct relative positions
    // during leaving transitions
    const canMove = !removeOnly

    if (process.env.NODE_ENV !== 'production') {
      checkDuplicateKeys(newCh)
    }

    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
      if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
      } else if (isUndef(oldEndVnode)) {
        oldEndVnode = oldCh[--oldEndIdx]
      } else if (sameVnode(oldStartVnode, newStartVnode)) {
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
        oldStartVnode = oldCh[++oldStartIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]
      } else {
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
          ? oldKeyToIdx[newStartVnode.key]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
        if (isUndef(idxInOld)) { // New element
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {
          vnodeToMove = oldCh[idxInOld]
          if (sameVnode(vnodeToMove, newStartVnode)) {
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
            oldCh[idxInOld] = undefined
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } else {
            // same key but different element. treat as new element
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }
        newStartVnode = newCh[++newStartIdx]
      }
    }
    if (oldStartIdx > oldEndIdx) {
      refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
      addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
    } else if (newStartIdx > newEndIdx) {
      removeVnodes(oldCh, oldStartIdx, oldEndIdx)
    }
  }

patchVnode

功能是根据根据新的Vnode去更新旧的VNode,把dom属性,class事件啥的都一一同步,让旧的节点跟新的节点一样

由此编码上的注意点

  • 尽量不要跨层级的修改dom
  • 设置key可以最大化的利用节点,同一层不要设置两个key相同
  • 不同的节点不要设置相同的key
  • 不要盲目相信diff的效率,在必要时可以手工优化
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,561评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,218评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,162评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,470评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,550评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,806评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,951评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,712评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,166评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,510评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,643评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,306评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,930评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,745评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,983评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,351评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,509评论 2 348

推荐阅读更多精彩内容