接上一篇内容: VUE2.0 模板编译原理(一):解析器
二、优化器
优化器的作用是在AST中找到静态子树并打上标记,即那些永远不会发生变化的节点,例如纯文本节点。
打标记的作用:
-
在生成VNode的过程中,除了首次渲染,每次重新渲染,不需要为静态子树创建新节点,会直接克隆已存在的静态子树;
-
虚拟DOM的patch过程中可以跳过,因为没有比较的必要,它是不变的,节省js脚本运算成本。
实现的主要步骤:
-
在AST中找到所有静态节点并标记;
-
在AST中找到所有静态根节点并标记。
在AST中,static属性为true的就是静态节点,比如<p>啊哈哈哈</p>。
静态根节点意思是所有子节点是静态节点,父节点是动态的,那么自己就是静态根节点,staticRoot为true。
实现源码在src/compiler/optimizer.js文件中。