前面讲过vuejs中解析器是把html模版解析成AST,而优化器的作用是在AST中找到静态子树并打上标记。
静态子树是指的那些在AST中永远不会发生变化的节点。
例如,一个纯文本节点就是静态子树,而带变量的文本节点就不是静态子树,因为他会随着变量的变化而变化。
标记静态子树有两点好处。
- 每次重新渲染时,不需要为静态子树创建新节点
- 在虚拟DOM中打补丁的过程可以跳过
重新渲染,不需要为静态子树创建新节点
前面介绍虚拟DOM时,我们说每次重新渲染都会使用最新的状态生成一份全新的VNode与旧的VNode进行对比。
而在生成VNode的过程中,如果发现一个节点被标记为静态子树,那么除了首次渲染会生成节点之外,在重新渲染时并不会生成新的子节点树,而是克隆已存在的静态子树。
在虚拟DOM中打补丁的过程可以被跳过
之前说过打补丁的过程,需要对比两个节点并更新DOM。如果两个节点都是静态子树,就不需要进行对比与更新DOM的操作,直接跳过。
因为静态子树是不可变的,不需要对比就知道它不可能发生变化。此外,直接跳过后续的各种对比可以节省javascript的运算成本。
实现步骤
第1步:在AST中找出所有的静态节点并打上标记,
第2步:在AST中找出所有静态根节点并打上标记。