模板引擎避免重复渲染需采用挂载点复用与差量更新：缓存编译函数、复用节点、显式赋值表单、克隆template内容；Layui中用{{{}}}跳过转义；Handlebars编译失败常因DOM未就绪或模板语法错误；Object.entries()过滤null/undefined更可靠。
模板引擎怎么避免重复渲染 DOM 节点
直接 innerHTML = template(data) 会销毁原有 DOM 节点，导致事件监听丢失、焦点丢失、输入框内容清空。Layui 的 templet 或 Vue 的 v-html 都不解决这个问题——它们只管生成 HTML 字符串，不管节点复用。
真正要优化，得用「挂载点复用 + 差量更新」思路：
- 把模板编译结果缓存为函数（如
Handlebars.compile(tpl)），别每次重新 parse - 渲染前先查目标容器是否有子节点，有则用
replaceChildren()或手动 diff（简单场景可用innerHTML但必须确保无事件绑定） - 对表单类组件，优先用
input.value = data.value显式赋值，而不是重写整个<input>标签 - 如果用了
<template>元素，记得用document.importNode(template.content, true)克隆，别直接 appendtemplate.content（它只能用一次）
Layui 表格里 templet 渲染 HTML 内容为什么显示为纯文本
常见现象：模板里写了 {{=d.content}}，但页面上看到的是 <strong>Hello</strong> 字面量，没解析成加粗文字。
根本原因是 Layui 默认对 {{=...}} 做了 HTML 转义——它把 < 变成 ，所以浏览器当普通文本渲染。
立即学习“前端免费学习笔记（深入）”；
正确做法只有两个：
- 用三重大括号：
{{{d.content}}}（注意是三个{），Layui 会跳过转义 - 或在后端/数据层提前把
<strong>这类标签过滤干净（比如用 DOMPurify 处理富文本），再传给前端
⚠️ 别用 unescape() 或 innerHTML = ... 手动解码，容易引入 XSS。
为什么 Handlebars.compile() 返回的函数执行后是空字符串
不是模板没数据，而是编译阶段就失败了，但 Handlebars 不报错，只返回一个“执行即崩”的函数。
排查顺序建议：
- 检查
document.getElementById("tpl")是否为null——ID 拼错、DOM 未就绪、<script type="text/html">没闭合都会导致innerHTML为空 - 确认模板字符串里没有未闭合的
{{或多余}，哪怕多一个右花括号也会让compile()静默失效 - 比对数据字段名大小写：JS 传
{ userName: "Alice" }，模板却写{{user_name}}→ 渲染空白 - 嵌套对象访问要显式导出：
{{user.profile.avatar}}要求数据是{ user: { profile: { avatar: "..." } } }，不能靠 JS 自动展开
动态生成 HTML 模板时 Object.entries() 怎么避开 null/undefined 字段
像 print_directions_verbose() 那种手写 8 个条件判断的写法，不仅难维护，还容易漏掉 null 和 undefined 的区别。
用 Object.entries() + filter() 更可靠：
const html = Object.entries(dirs)
.filter(([_, v]) => v != null && v !== '')
.map(([key, value]) =>
`<div class="info-dir">${key}:${value}</div>`
)
.join('');
注意这里用 v != null（排除 null 和 undefined），不用 v 简单判断——否则 0、false、'' 全被过滤掉。
这种写法天然跳过不存在的 key，不需要提前定义所有方向字段，扩展性好，但要求数据结构是扁平对象，不支持深层嵌套路径。
