美文网首页让前端飞Vue.js专区Web前端之路
学习vue2.5源码之第七篇——compiler中的optimi

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

作者: Rocky_Wong | 来源:发表于2017-12-18 15:33 被阅读58次

    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是没有staticstaticRoot属性的):

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

    相关文章

      网友评论

        本文标题:学习vue2.5源码之第七篇——compiler中的optimi

        本文链接:https://www.haomeiwen.com/subject/uodmwxtx.html