1
const browserRenderer = createRenderer({
2
  createElement(tag) {
3
    return document.createElement(tag)
4
  },
5
  setElementText(el, text) {
6
    el.textContent = text
7
  },
8
  insert(el, parent, anchor = null) {
9
    parent.insertBefore(el, anchor)
10
  },
11
  remove(el) {
12
    const parent = el.parentNode
13
    if (parent) parent.removeChild(el)
14
  },
15
  patchProps(el, key, prevValue, nextValue) {
16
    if (/^on/.test(key)) {
17
      // 事件处理
18
      const name = key.slice(2).toLowerCase()
19
      const invokers = el._vei || (el._vei = {})
20
      let invoker = invokers[name]
21

22
      if (nextValue) {
23
        if (!invoker) {
24
          invoker = el._vei[name] = (e) => {
25
            // 事件触发时间早于绑定时间，忽略
26
            if (e.timeStamp < invoker.attached) return
27

28
            if (Array.isArray(invoker.value)) {
29
              invoker.value.forEach(fn => fn(e))
30
            } else {
31
              invoker.value(e)
32
            }
33
          }
34
          invoker.value = nextValue
35
          invoker.attached = performance.now()
36
          el.addEventListener(name, invoker)
37
        } else {
38
          // 更新事件：只需更新 value，无需 remove/add
39
          invoker.value = nextValue
40
        }
41
      } else if (invoker) {
42
        el.removeEventListener(name, invoker)
43
      }
44
    } else if (key === 'class') {
45
      // className 性能最好
46
      el.className = nextValue || ''
47
    } else if (shouldSetAsProps(el, key)) {
48
      el[key] = nextValue
49
    } else {
50
      el.setAttribute(key, nextValue)
51
    }
52
  },
53
  createText(text) {
54
    return document.createTextNode(text)
55
  },
56
  setText(el, text) {
57
    el.nodeValue = text
58
  }
59
})

1
const canvasRenderer = createRenderer({
2
  createElement(tag) {
3
    // 返回一个虚拟的 canvas 元素对象
4
    return { tag, props: {}, children: [], x: 0, y: 0 }
5
  },
6
  setElementText(el, text) {
7
    el.text = text
8
  },
9
  insert(el, parent) {
10
    parent.children.push(el)
11
    // 重新绘制 canvas
12
    drawCanvas(parent)
13
  },
14
  // ... 其他 API
15
})

1
function patchChildren_simple(n1, n2, container) {
2
  const oldChildren = n1.children
3
  const newChildren = n2.children
4
  const commonLength = Math.min(oldChildren.length, newChildren.length)
5

6
  // 1. 比较公共部分
7
  for (let i = 0; i < commonLength; i++) {
8
    patch(oldChildren[i], newChildren[i])
9
  }
10

11
  // 2. 新节点多，挂载
12
  if (newChildren.length > commonLength) {
13
    for (let i = commonLength; i < newChildren.length; i++) {
14
      patch(null, newChildren[i], container)
15
    }
16
  }
17

18
  // 3. 旧节点多，卸载
19
  if (oldChildren.length > commonLength) {
20
    for (let i = commonLength; i < oldChildren.length; i++) {
21
      unmount(oldChildren[i])
22
    }
23
  }
24
}

1
function patchChildren_double(n1, n2, container) {
2
  let oldStartIdx = 0
3
  let oldEndIdx = n1.children.length - 1
4
  let newStartIdx = 0
5
  let newEndIdx = n2.children.length - 1
6

7
  let oldStartVNode = n1.children[oldStartIdx]
8
  let oldEndVNode = n1.children[oldEndIdx]
9
  let newStartVNode = n2.children[newStartIdx]
10
  let newEndVNode = n2.children[newEndIdx]
11

12
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
13
    if (oldStartVNode.key === newStartVNode.key) {
14
      // 头头比较
15
      patch(oldStartVNode, newStartVNode)
16
      oldStartVNode = n1.children[++oldStartIdx]
17
      newStartVNode = n2.children[++newStartIdx]
18
    } else if (oldEndVNode.key === newEndVNode.key) {
19
      // 尾尾比较
20
      patch(oldEndVNode, newEndVNode)
21
      oldEndVNode = n1.children[--oldEndIdx]
22
      newEndVNode = n2.children[--newEndIdx]
23
    } else if (oldStartVNode.key === newEndVNode.key) {
24
      // 头尾比较：需要移动
25
      patch(oldStartVNode, newEndVNode)
26
      insert(oldStartVNode.el, container, oldEndVNode.el.nextSibling)
27
      oldStartVNode = n1.children[++oldStartIdx]
28
      newEndVNode = n2.children[--newEndIdx]
29
    } else if (oldEndVNode.key === newStartVNode.key) {
30
      // 尾头比较：需要移动
31
      patch(oldEndVNode, newStartVNode)
32
      insert(oldEndVNode.el, container, oldStartVNode.el)
33
      oldEndVNode = n1.children[--oldEndIdx]
34
      newStartVNode = n2.children[++newStartIdx]
35
    } else {
36
      // 四种都没命中，遍历查找
37
      // ...
38
    }
39
  }
40
}

1
function patchKeyedChildren(c1, c2, container) {
2
  let i = 0
3
  let e1 = c1.length - 1
4
  let e2 = c2.length - 1
5

6
  // ① 从头部开始，跳过相同的前缀
7
  while (i <= e1 && i <= e2) {
8
    if (c1[i].key === c2[i].key) {
9
      patch(c1[i], c2[i])
10
      i++
11
    } else {
12
      break
13
    }
14
  }
15

16
  // ② 从尾部开始，跳过相同的后缀
17
  while (i <= e1 && i <= e2) {
18
    if (c1[e1].key === c2[e2].key) {
19
      patch(c1[e1], c2[e2])
20
      e1--
21
      e2--
22
    } else {
23
      break
24
    }
25
  }
26

27
  // ③ 旧节点已遍历完，新节点有剩余 → 挂载
28
  if (i > e1 && i <= e2) {
29
    const anchor = e2 + 1 < c2.length ? c2[e2 + 1].el : null
30
    while (i <= e2) {
31
      patch(null, c2[i++], container, anchor)
32
    }
33
  }
34

35
  // ④ 新节点已遍历完，旧节点有剩余 → 卸载
36
  else if (i > e2 && i <= e1) {
37
    while (i <= e1) {
38
      unmount(c1[i++])
39
    }
40
  }
41

42
  // ⑤ 中间乱序部分：使用 LIS 优化移动
43
  else {
44
    const s1 = i
45
    const s2 = i
46

47
    // 5.1 建立新节点 key → index 映射
48
    const keyToNewIndexMap = new Map()
49
    for (let j = s2; j <= e2; j++) {
50
      keyToNewIndexMap.set(c2[j].key, j)
51
    }
52

53
    // 5.2 遍历旧节点，尝试复用
54
    const toBePatched = e2 - s2 + 1
55
    const newIndexToOldIndexMap = new Array(toBePatched).fill(0)
56
    let moved = false
57
    let maxNewIndexSoFar = 0
58

59
    for (let j = s1; j <= e1; j++) {
60
      const oldVNode = c1[j]
61
      const newIndex = keyToNewIndexMap.get(oldVNode.key)
62

63
      if (newIndex === undefined) {
64
        // 旧节点在新列表中不存在，卸载
65
        unmount(oldVNode)
66
      } else {
67
        newIndexToOldIndexMap[newIndex - s2] = j + 1
68

69
        // 判断是否需要移动
70
        if (newIndex >= maxNewIndexSoFar) {
71
          maxNewIndexSoFar = newIndex
72
        } else {
73
          moved = true
74
        }
75

76
        patch(oldVNode, c2[newIndex])
77
      }
78
    }
79

80
    // 5.3 移动和挂载
81
    if (moved) {
82
      // 计算最长递增子序列
83
      const seq = getSequence(newIndexToOldIndexMap)
84
      let seqIdx = seq.length - 1
85

86
      // 从后往前遍历，保证 anchor 正确
87
      for (let j = toBePatched - 1; j >= 0; j--) {
88
        const newIndex = s2 + j
89
        const anchor = newIndex + 1 < c2.length ? c2[newIndex + 1].el : null
90

91
        if (newIndexToOldIndexMap[j] === 0) {
92
          // 新节点，挂载
93
          patch(null, c2[newIndex], container, anchor)
94
        } else if (moved) {
95
          if (seqIdx < 0 || j !== seq[seqIdx]) {
96
            // 不在 LIS 中，需要移动
97
            insert(c2[newIndex].el, container, anchor)
98
          } else {
99
            // 在 LIS 中，不需要移动
100
            seqIdx--
101
          }
102
        }
103
      }
104
    }
105
  }
106
}

1
// 编译前
2
function render() {
3
  return h('div', [
4
    h('p', 'Static'),     // 每次渲染都创建
5
    h('p', ctx.msg)
6
  ])
7
}
8

9
// 编译后（静态提升）
10
const _hoisted = h('p', 'Static')  // 只创建一次
11

12
function render() {
13
  return h('div', [
14
    _hoisted,              // 复用
15
    h('p', ctx.msg)
16
  ])
17
}