vuejs源码阅读之优化器

vuejs源码阅读之优化器_第1张图片

前面讲过vuejs中解析器是把html模版解析成AST,而优化器的作用是在AST中找到静态子树并打上标记。

静态子树是指的那些在AST中永远不会发生变化的节点。

例如,一个纯文本节点就是静态子树,而带变量的文本节点就不是静态子树,因为他会随着变量的变化而变化。

标记静态子树有两点好处。

  • 每次重新渲染时,不需要为静态子树创建新节点
  • 在虚拟DOM中打补丁的过程可以跳过

重新渲染,不需要为静态子树创建新节点

前面介绍虚拟DOM时,我们说每次重新渲染都会使用最新的状态生成一份全新的VNode与旧的VNode进行对比。

而在生成VNode的过程中,如果发现一个节点被标记为静态子树,那么除了首次渲染会生成节点之外,在重新渲染时并不会生成新的子节点树,而是克隆已存在的静态子树。

在虚拟DOM中打补丁的过程可以被跳过

之前说过打补丁的过程,需要对比两个节点并更新DOM。如果两个节点都是静态子树,就不需要进行对比与更新DOM的操作,直接跳过。

因为静态子树是不可变的,不需要对比就知道它不可能发生变化。此外,直接跳过后续的各种对比可以节省javascript的运算成本。

实现步骤

第1步:在AST中找出所有的静态节点并打上标记,
第2步:在AST中找出所有静态根节点并打上标记。

你可能感兴趣的:(vue.js,javascript,ecmascript)