编译器将html模板编译为render函数需三步：先解析成ast，再标记静态节点优化，最后生成可执行javascript函数；解析用正则+栈构建语法树，静态优化跳过无变化节点以提升diff性能，生成阶段拼接with作用域代码并用function构造函数。
编译器把 HTML 模板变成 render 函数，核心是三步：先解析成 AST，再标记静态节点优化，最后拼出可执行的 JavaScript 函数。这个过程不是简单字符串替换，而是有结构、有策略的代码生成。
解析成 AST：用正则+栈构建语法树
编译器逐字符扫描模板，靠一组精准正则识别开始标签、结束标签、属性、插值表达式等。比如匹配 <div id="app"> 会拆出 tag 名、属性键值；遇到 <code>{{ msg }} 就提取为文本节点并标记为动态。所有节点按嵌套关系用栈组织，最终产出一棵描述结构和绑定关系的 AST 对象树。
静态节点优化：跳过无变化部分的比对
AST 构建完成后，编译器会深度遍历它，判断哪些节点完全不依赖响应式数据（比如纯文字、没有指令/插值的元素）。这些节点被打上 static 标记，并可能被提升为 staticRenderFns 单独函数。运行时 diff 阶段直接复用它们的 vnode，省去递归比对和重建开销。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
生成 render 函数：拼接 + with + Function 构造
基于优化后的 AST，编译器递归调用 generate 方法，把每个节点转成类似 _c('div', { attrs: { id: "app" } }, [_v(_s(msg))]) 的代码片段：
-
_c对应createElement，创建元素 vnode -
_v包裹文本，_s处理字符串化 - 属性、事件、指令都转为对应参数或子函数调用
- 所有代码拼进
with(this){ return ... }作用域，让msg等 data 属性可直接访问 - 最终用
new Function把字符串编译成真正的函数对象
提前编译：避免运行时解析开销
在构建阶段（如用 vue-template-loader），HTML 模板被直接编译成 render 函数导出，组件加载时不再需要浏览器端解析模板。这不仅提速，还让服务端渲染、Tree-shaking 更可靠——因为最终产物就是标准 JS 函数，没有 HTML 字符串解析逻辑参与运行时。
