模板引擎仅生成html字符串，不操作dom；误用innerhtml会导致事件丢失、焦点重置等问题；应限定用于静态区域，动态部分用细粒度dom api更新，并配合预编译、节点复用与virtual dom协作。
模板引擎不是渲染器，别让它直接操作 DOM
HTML 模板引擎（比如 html-templating-js 或手写的字符串插值）本身不挂载、不更新、不 diff，它只负责生成一段 HTML 字符串。如果你每次数据变都调用 el.innerHTML = template(data)，等于每轮都销毁整个子树——事件监听器丢失、焦点重置、input 光标跳变、滚动位置归零。这不是模板引擎慢，是你误用了它的定位。
实操建议：
- 仅对「完全静态」或「整块替换无交互」的区域用模板字符串直赋
innerHTML，例如弹窗内容、纯展示卡片 - 对含
input、textarea、contenteditable的区域，改用细粒度 DOM API 更新（如textContent、dataset、classList.toggle） - 避免在模板中拼接事件处理器字符串（如
onclick="handleClick()"），这无法绑定闭包上下文，且 XSS 风险高
关键路径上禁用完整模板重绘
实时编辑器、聊天列表、仪表盘等场景下，用户感知最敏感的是「某一行/某一项」的变更。此时若用模板引擎全量重生成整个列表，哪怕 DOM 结构一致，浏览器仍要走一遍 parse → construct → layout → paint 流程，性能损耗集中在 layout 计算和样式树重建。
实操建议：
- 把模板引擎输出限定为「最小可复用单元」，例如单条消息的 HTML 字符串，而非整个
<ul></ul> - 维护一个 DOM 节点池，用
dataset.id匹配数据项 ID，复用已有节点并只更新变动字段 - 对高频更新字段（如计数 badge、在线状态 dot），绕过模板，直接操作
el.textContent或el.className
预编译模板 + 数据快照，规避运行时解析开销
每次调用 template(data) 都要正则匹配、字符串替换、拼接，对长模板或复杂嵌套（如条件+循环+转义）会成为 CPU 瓶颈。尤其在低端安卓 WebView 或旧版 Safari 中，单次渲染可能耗时 20ms+。
实操建议：
- 使用支持预编译的轻量引擎（如
dot、marko的编译模式），把模板转成可执行函数，避免每次解析 - 对稳定结构的数据（如用户资料卡片），提前生成一次快照 HTML，缓存到
Map或 WeakMap 中，按 key 复用 - 禁用运行时 HTML 转义（如
{{value}}vs{{{value}}}），除非明确需要插入富文本；纯文本一律走textContent更快更安全
模板与 Virtual DOM 不是二选一，而是分工协作
有人觉得“用了 React 就不用模板引擎”，其实错位了：模板引擎解决的是「如何把数据变成 HTML 字符串」，Virtual DOM 解决的是「如何把新旧树差异映射到真实 DOM」。两者可以共存——比如用模板生成 VNode 的 children，再交由轻量 diff 工具（如 ivi、nanoview）做 patch。
实操建议：
- 模板只负责生成纯净 HTML 片段（不含事件绑定、无副作用），作为 VNode 的
children或innerHTML属性值 - 把模板编译结果缓存在闭包里，避免重复构建函数：
const compiled = compile(templateString); compiled(data) - 对服务端渲染（SSR）场景，模板引擎输出的字符串可直接作为 hydration 的起点，但客户端首次 update 必须走 diff，不能再次 innerHTML
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
