笔记
- 渲染的整个过程
- 模板编译就是将模板(tempalte)里面的html内容转化成渲染函数的过程。它的工作流程：
- 先将模板转化成ast(细分为
解析器功能)， - 再遍历ast标记静态节点(细分为
优化器功能)， - 最后用ast生成渲染函数(细分为
代码生成器功能)。
模板编译
模板编译就是将模板(tempalte)里面的html内容转化成渲染函数的过程。
解析器(template转ast)
将template转成ast的过程，由如下几个解析器组合而成。
- HTML解析器
- 文本解析器
- 过滤器解析器
HTML解析器
解析HTML模板的过程就是循环的过程，简单来说就是用HTML模板字符串来循环，每轮循环都从HTML模板中截取一小段字符串，然后重复以上过程，直到HTML模板被截成一个空字符串时结束循环，解析完毕。
文本解析器
文本解析器是对HTML解析器解析出来的文本进行二次加工。文本分两种类型，一种是纯文本，另一种是带变量的文本。如果是纯文本，不需要进行任何处理；但如果是带变量的文本，那么需要使用文本解析器进一步解析。因为带变量的文本在使用虚拟DOM进行渲染时，需要将变量替换成变量中的值。
优化器(ast标记静态节点)
优化器的作用是在AST中找出静态子树并打上标记，这一步是为patch服务的。
工作流程：
- (1) 在AST中找出所有静态节点并打上标记；
- (2) 在AST中找出所有静态根节点并打上标记。
静态节点：永远都不会变化的节点
静态节点举例：p为静态节点
<p>我是静态节点，我不需要发生变化</p>
静态根节点：一个节点下面的所有子节点都是静态节点
静态根节点举例：ul为静态根节点
<ul>
<li>我是静态节点，我不需要发生变化</li>
<li>我是静态节点2，我不需要发生变化</li>
<li>我是静态节点3，我不需要发生变化</li>
</ul>
代码生成器(ast变渲染函数字符串)
将AST转换成渲染函数中的内容，这个内容可以称为代码字符串。
变成如下：
