学习vue2.5源码之第七篇——compiler中的optimizer

optimizer

回顾一下上一部分的内容，我们从template一步步的转化为一个抽象语法树AST，而今天这部分比较简单，就是compiler中的第二步——对AST进行静态优化。其中主要操作就是找出AST中静态内容，并对其添加标注，为后面转化成render代码做准备。

静态内容指的就是不需要进行多次刷新的内容，我们就把它当做常量处理，在重新渲染的时候直接跳过，无需特意改变它们。

src/compiler/optimizer.js

打开这个文件看一下也就一百多行代码，很容易理解~ 我们赶紧开始学习吧

export function optimize (root: ?ASTElement, options: CompilerOptions) {
  if (!root) return
  isStaticKey = genStaticKeysCached(options.staticKeys || '')
  isPlatformReservedTag = options.isReservedTag || no

  // first pass: mark all non-static nodes. 标记所有非静态节点
  markStatic(root)
  // second pass: mark static roots. 标记静态子树
  markStaticRoots(root, false)
}

从optimize函数看起，先是判断传入的keys是否在type,tag,attrsList,attrsMap,plain,parent,children,attrs,staticKeys这些属性限定范围内，其中staticKeys指的就是staticClass静态类, staticStyle静态样式。

function genStaticKeys (keys: string): Function {
  return makeMap(
    'type,tag,attrsList,attrsMap,plain,parent,children,attrs' +
    (keys ? ',' + keys : '')
  )
}

然后是判断是否是平台保留标签isPlatformReservedTag，这里所有的HTML和SVG标签都会返回true。

接着就是我们的主菜了，分为两个步骤：

• 标记静态节点标签，区分非静态节点和静态节点

• 标记静态根节点

function markStatic (node: ASTNode) {
  node.static = isStatic(node)
  if (node.type === 1) {
    // 假如有slot的话不能设为静态
    if (
      // 不是保留标签
      !isPlatformReservedTag(node.tag) &&
      // 不是slot
      node.tag !== 'slot' &&
      // 不是一个内联模板容器
      node.attrsMap['inline-template'] == null
    ) {
      return
    }
    for (let i = 0, l = node.children.length; i < l; i++) {
      const child = node.children[i]
      markStatic(child)
      // 只要有一个子树不是静态的话整个都不是静态
      if (!child.static) {
        node.static = false
      }
    }
    if (node.ifConditions) {
      for (let i = 1, l = node.ifConditions.length; i < l; i++) {
        const block = node.ifConditions[i].block
        markStatic(block)
        if (!block.static) {
          node.static = false
        }
      }
    }
  }
}

第一步markStatic，我们先判断该节点是否是静态的，在isStatic中判断出type为2或3的节点还有一些特殊的节点。我在注释中有所标记。

function isStatic (node: ASTNode): boolean {
  if (node.type === 2) { // expression表达式不是静态文本
    return false
  }
  if (node.type === 3) { // text是静态文本
    return true
  }
  return !!(node.pre || ( // v-pre指令,结点的子内容是不做编译
    !node.hasBindings && // 无动态绑定
    !node.if && !node.for && // 无 v-if or v-for or v-else
    !isBuiltInTag(node.tag) && // not a built-in 不是内置的标签，内置的标签有slot和component
    isPlatformReservedTag(node.tag) && // not a component 是平台保留标签
    !isDirectChildOfTemplateFor(node) && // 不是template标签的直接子元素且没有包含在for循环中
    Object.keys(node).every(isStaticKey) // 结点包含的属性只能有isStaticKey中指定的几个
  ))
}

然后再对type为1的节点进行递归操作，只要有一个它的子树不是静态的话它就不是静态的。

第二步markStaticRoots

function markStaticRoots (node: ASTNode, isInFor: boolean) {
  if (node.type === 1) {
    if (node.static || node.once) {
      node.staticInFor = isInFor
    }
    // 对于一个静态根结点，它不应该只包含静态文本，否则消耗会超过获得的收益，更好的做法让它每次渲染时都刷新
    if (node.static && node.children.length && !(
      node.children.length === 1 &&
      node.children[0].type === 3
    )) {
      node.staticRoot = true
      return
    } else {
      node.staticRoot = false
    }
    if (node.children) {
      for (let i = 0, l = node.children.length; i < l; i++) {
        markStaticRoots(node.children[i], isInFor || !!node.for)
      }
    }
    if (node.ifConditions) {
      for (let i = 1, l = node.ifConditions.length; i < l; i++) {
        markStaticRoots(node.ifConditions[i].block, isInFor)
      }
    }
  }
}

注意，当这个静态节点只有静态文本的时候我们设为false，因为如果只包含静态文本的话渲染过程的消耗会大于获得的收益，更好的做法让它每次渲染时都刷新。然后也是对其子树进行递归操作，添加上staticRoot属性。

我们再看一眼上一篇小栗子中AST的结构（其实上一篇文章中未优化的AST是没有static和staticRoot属性的）：

优化AST这部分就这样愉快的结束啦~ 感谢你的阅读 : )