编译优化

160 阅读2分钟

动态节点收集与补丁标志

  • 在VUE编译阶段可以对代码进行优化,
  • 编译过程中会在代码虚似DOM中建一个patchFlag
  • 其值是一个对象当值中 Text 属性为 为 1 时代码文本是动态的
  • 有一个属性CLASS值为2代表class是动态的
  • 有一个属性STYLE其值是 3 代表样式是动态的
  • 在编译过程中会将动态节点编译与静态节点区分开来
  • 通过属性 dynamicChildren 之后在DIFF算法中只需要计算dynamicChildren中的值,以实现优化
  • 在收集动态节点时
  • 在创建动态节点时会判断flags 与当前VUE文件是是否有创建前的动态节点
  • 如果有创建与当前创建的节点为动态节点属性则将当前节点添加到动态节点栈中
  • 并在完成函数执行时弹栈
  • 最后,会在创建节点外面套一层然后将返回的节点中回一个属性内容就是动态节点
  • 这样就实现在动态的收集节点
  • 这样在进行节点更新时就只需要更新动态的节点了

Block树

  • 块树会根据 判断条件生成
  • 块树能够将v-if与v-for的内容进行区分以便产生混乱
  • V-IF在判断生效后将动态节点更新
  • 以更新更新DIFF
  • V-FOR通过将BLOCK放置一个特定的tag里然后在tag做DIFF与更新
  • 静态提升会将props与DOM进么预编译如果存在动态则将其编入动态渲染函数内
  • 否则不编入动态渲染函数
  • 以实现性能提升
  • 预字符串化
  • 将静态内容使用innerHTML 放入DOM以提升性能与内存内用
  • 通过缓存内联事件中的内容实现性能提升
  • v-once 提升性能