乐趣区

关于vue.js:解读Vue3模板编译优化

明天的文章打算学习下 Vue3 下的模板编译与 Vue2 下的差别,以及 VDOM 下 Diff 算法的优化。

编译入口

理解过 Vue3 的同学必定晓得 Vue3 引入了新的组合 Api,在组件 mount 阶段会调用 setup 办法,之后会判断 render 办法是否存在,如果不存在会调用 compile 办法将 template 转化为 render

// packages/runtime-core/src/renderer.ts
const mountComponent = (initialVNode, container) => {
  const instance = (
    initialVNode.component = createComponentInstance(// ...params)
  )
  // 调用 setup
  setupComponent(instance)
}

// packages/runtime-core/src/component.ts
let compile
export function registerRuntimeCompiler(_compile) {compile = _compile}
export function setupComponent(instance) {
  const Component = instance.type
  const {setup} = Component
  if (setup) {// ... 调用 setup}
  if (compile && Component.template && !Component.render) {
      // 如果没有 render 办法
    // 调用 compile 将 template 转为 render 办法
    Component.render = compile(Component.template, {...})
  }
}

这部分都是 runtime-core 中的代码,之前的文章有讲过 Vue 分为完整版和 runtime 版本。如果应用 vue-loader 解决 .vue 文件,个别都会将 .vue 文件中的 template 间接解决成 render 办法。

//  须要编译器
Vue.createApp({template: '<div>{{ hi}}</div>'
})

// 不须要
Vue.createApp({render() {return Vue.h('div', {}, this.hi)
  }
})

完整版与 runtime 版的差别就是,完整版会引入 compile 办法,如果是 vue-cli 生成的我的项目就会抹去这部分代码,将 compile 过程都放到打包的阶段,以此优化性能。runtime-dom 中提供了 registerRuntimeCompiler 办法用于注入 compile 办法。

[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传 (img-sj0Ctvim-1665390661650)(https://p3-juejin.byteimg.com…)]

主流程

在完整版的 index.js 中,调用了 registerRuntimeCompilercompile 进行注入,接下来咱们看看注入的 compile 办法次要做了什么。

// packages/vue/src/index.ts
import {compile} from '@vue/compiler-dom'

// 编译缓存
const compileCache = Object.create(null)

// 注入 compile 办法
function compileToFunction(
    // 模板
  template: string | HTMLElement,  // 编译配置
  options?: CompilerOptions
): RenderFunction {if (!isString(template)) {
    // 如果 template 不是字符串
    // 则认为是一个 DOM 节点,获取 innerHTML
    if (template.nodeType) {template = template.innerHTML} else {return NOOP}
  }

  // 如果缓存中存在,间接从缓存中获取
  const key = template
  const cached = compileCache[key]
  if (cached) {return cached}

  // 如果是 ID 选择器,这获取 DOM 元素后,取 innerHTML
  if (template[0] === '#') {const el = document.querySelector(template)
    template = el ? el.innerHTML : ''
  }

  // 调用 compile 获取 render code
  const {code} = compile(
    template,
    options
  )

  // 将 render code 转化为 function
  const render = new Function(code)();

    // 返回 render 办法的同时,将其放入缓存
  return (compileCache[key] = render)
}

// 注入 compile
registerRuntimeCompiler(compileToFunction)

在讲 Vue2 模板编译的时候曾经讲过,compile 办法次要分为三步,Vue3 的逻辑相似:

  1. 模板编译,将模板代码转化为 AST;
  2. 优化 AST,不便后续虚构 DOM 更新;
  3. 生成代码,将 AST 转化为可执行的代码;参考 vue 实战视频解说:进入学习
// packages/compiler-dom/src/index.ts
import {baseCompile, baseParse} from '@vue/compiler-core'
export function compile(template, options) {return baseCompile(template, options)
}

// packages/compiler-core/src/compile.ts
import {baseParse} from './parse'
import {transform} from './transform'

import {transformIf} from './transforms/vIf'
import {transformFor} from './transforms/vFor'
import {transformText} from './transforms/transformText'
import {transformElement} from './transforms/transformElement'

import {transformOn} from './transforms/vOn'
import {transformBind} from './transforms/vBind'
import {transformModel} from './transforms/vModel'

export function baseCompile(template, options) {
  // 解析 html,转化为 ast
  const ast = baseParse(template, options)
  // 优化 ast,标记动态节点
  transform(ast, {
    ...options,
    nodeTransforms: [
      transformIf,
      transformFor,
      transformText,
      transformElement,
      // ... 省略了局部 transform
    ],
    directiveTransforms: {
      on: transformOn,
      bind: transformBind,
      model: transformModel
    }
  })
  // 将 ast 转化为可执行代码
  return generate(ast, options)
}

计算 PatchFlag

这里大抵的逻辑与之前的并没有多大的差别,次要是 optimize 办法变成了 transform 办法,而且默认会对一些模板语法进行 transform。这些 transform 就是后续虚构 DOM 优化的要害,咱们先看看 transform 的代码。

// packages/compiler-core/src/transform.ts
export function transform(root, options) {const context = createTransformContext(root, options)
  traverseNode(root, context)
}
export function traverseNode(node, context) {
  context.currentNode = node
  const {nodeTransforms} = context
  const exitFns = []
  for (let i = 0; i < nodeTransforms.length; i++) {
    // Transform 会返回一个退出函数,在解决完所有的子节点后再执行
    const onExit = nodeTransforms[i](node, context)
    if (onExit) {if (isArray(onExit)) {exitFns.push(...onExit)
      } else {exitFns.push(onExit)
      }
    }
  }
  traverseChildren(node, context)
  context.currentNode = node
  // 执行所以 Transform 的退出函数
  let i = exitFns.length
  while (i--) {exitFns[i]()}
}

咱们重点看一下 transformElement 的逻辑:

// packages/compiler-core/src/transforms/transformElement.ts
export const transformElement: NodeTransform = (node, context) => {
  // transformElement 没有执行任何逻辑,而是间接返回了一个退出函数
  // 阐明 transformElement 须要等所有的子节点解决完后才执行
  return function postTransformElement() {const { tag, props} = node

    let vnodeProps
    let vnodePatchFlag
    const vnodeTag = node.tagType === ElementTypes.COMPONENT
      ? resolveComponentType(node, context)
      : `"${tag}"`

    let patchFlag = 0
    // 检测节点属性
    if (props.length > 0) {
      // 检测节点属性的动静局部
      const propsBuildResult = buildProps(node, context)
      vnodeProps = propsBuildResult.props
      patchFlag = propsBuildResult.patchFlag
    }

    // 检测子节点
    if (node.children.length > 0) {if (node.children.length === 1) {const child = node.children[0]
        // 检测子节点是否为动静文本
        if (!getStaticType(child)) {patchFlag |= PatchFlags.TEXT}
      }
    }

    // 格式化 patchFlag
    if (patchFlag !== 0) {vnodePatchFlag = String(patchFlag)
    }

    node.codegenNode = createVNodeCall(
      context,
      vnodeTag,
      vnodeProps,
      vnodeChildren,
      vnodePatchFlag
    )
  }
}

buildProps 会对节点的属性进行一次遍历,因为外部源码波及很多其余的细节,这里的代码是通过简化之后的,只保留了 patchFlag 相干的逻辑。

export function buildProps(node: ElementNode,  context: TransformContext,  props: ElementNode['props'] = node.props
) {
  let patchFlag = 0
  for (let i = 0; i < props.length; i++) {const prop = props[i]
    const [key, name] = prop.name.split(':')
    if (key === 'v-bind' || key === '') {if (name === 'class') {
          // 如果蕴含 :class 属性,patchFlag | CLASS
        patchFlag |= PatchFlags.CLASS
      } else if (name === 'style') {
          // 如果蕴含 :style 属性,patchFlag | STYLE
        patchFlag |= PatchFlags.STYLE
      }
    }
  }

  return {patchFlag}
}

下面的代码只展现了三种 patchFlag 的类型:

  • 节点只有一个文本子节点,且该文本蕴含动静的数据 TEXT = 1
<p>name: {{name}}</p>
  • 节点蕴含可变的 class 属性 CLASS = 1 << 1
<div :class="{active: isActive}"></div>
  • 节点蕴含可变的 style 属性 STYLE = 1 << 2
<div :style="{color: color}"></div>

能够看到 PatchFlags 都是数字 1 通过 左移操作符 计算失去的。

export const enum PatchFlags {
  TEXT = 1,             // 1, 二进制 0000 0001
  CLASS = 1 << 1,       // 2, 二进制 0000 0010
  STYLE = 1 << 2,       // 4, 二进制 0000 0100
  PROPS = 1 << 3,       // 8, 二进制 0000 1000
  ...
}

从下面的代码能看进去,patchFlag 的初始值为 0,每次对 patchFlag 都是执行 |(或)操作。如果以后节点是一个只有动静文本子节点且同时具备动静 style 属性,最初失去的 patchFlag 为 5( 二进制:0000 0101)。

<p :style="{color: color}">name: {{name}}</p>
patchFlag = 0
patchFlag |= PatchFlags.STYLE
patchFlag |= PatchFlags.TEXT
// 或运算:两个对应的二进制位中只有一个是 1,后果对应位就是 1。// 0000 0001
// 0000 0100
// ------------
// 0000 0101  =>  十进制 5

[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传 (img-MDpZgiyc-1665390661653)(https://p3-juejin.byteimg.com…)]

咱们将下面的代码放到 Vue3 中运行:

const app = Vue.createApp({data() {
    return {
      color: 'red',
      name: 'shenfq'
    }
  },
  template: `<div>      <p :style="{color: color}">name: {{name}}</p>  </div>`
})

app.mount('#app')

最初生成的 render 办法如下,和咱们之前的形容基本一致。

[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传 (img-z6O1fmVz-1665390661655)(https://p3-juejin.byteimg.com…)]

render 优化

Vue3 在虚构 DOM Diff 时,会取出 patchFlag 和须要进行的 diff 类型进行 &(与)操作,如果后果为 true 才进入对应的 diff。

[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传 (img-6qlLYmPe-1665390661657)(https://p3-juejin.byteimg.com…)]

还是拿之前的模板举例:

<p :style="{color: color}">name: {{name}}</p>

如果此时的 name 产生了批改,p 节点进入了 diff 阶段,此时会将判断 patchFlag & PatchFlags.TEXT,这个时候后果为真,表明 p 节点存在文本批改的状况。

[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传 (img-Tzwu7A4S-1665390661659)(https://p3-juejin.byteimg.com…)]

patchFlag = 5
patchFlag & PatchFlags.TEXT
// 或运算:只有对应的两个二进位都为 1 时,后果位才为 1。// 0000 0101
// 0000 0001
// ------------
// 0000 0001  =>  十进制 1
if (patchFlag & PatchFlags.TEXT) {if (oldNode.children !== newNode.children) {
    // 批改文本
    hostSetElementText(el, newNode.children)
  }
}

然而进行 patchFlag & PatchFlags.CLASS 判断时,因为节点并没有动静 Class,返回值为 0,所以就不会对该节点的 class 属性进行 diff,以此来优化性能。

[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传 (img-O6SMFmwd-1665390661661)(https://p3-juejin.byteimg.com…)]

patchFlag = 5
patchFlag & PatchFlags.CLASS
// 或运算:只有对应的两个二进位都为 1 时,后果位才为 1。// 0000 0101
// 0000 0010
// ------------
// 0000 0000  =>  十进制 0

总结

其实 Vue3 相干的性能优化有很多,这里只独自将 patchFlag 的十分之一的内容拿出来讲了,Vue3 还没正式公布的时候就有看到说 Diff 过程会通过 patchFlag 来进行性能优化,所以打算看看他的优化逻辑,总的来说还是有所播种。

退出移动版