广西住房和城乡建设厅官网培训seo一键优化

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

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

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

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

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

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

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

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

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

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

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

实现步骤

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