标签本身无性能高低之分，真正影响性能的是加载方式、作用域范围和渲染时机；它仅是惰性容器，不解析内容、不执行脚本，不可直接用于动态渲染，否则因频繁克隆、重排和无编译优化而拖慢首屏。
HTML 模板标签本身没有“性能高低”之分，真正影响性能的是加载方式、作用域范围和渲染时机——尤其是 标签被误当成“运行时模板引擎”来用时，最容易拖慢首屏。
为什么
是浏览器原生的惰性容器，内容不会被解析、不触发资源加载、不执行脚本。但它只是“存着”，不是“可执行模板”。很多开发者把它和 Vue 的 或 Django 的 {% include %} 混淆，结果在 JS 里反复 innerHTML 插入、cloneNode(true) 复制、再手动遍历绑定事件——这比直接用字符串模板还慢。
- 每次
cloneNode(true)都会重建整个 DOM 子树，含样式计算和布局重排开销 - 若模板内含
<script></script>或 - 没有编译优化，无法做静态节点提升或 patch diff，纯靠 JS 拼接 = 放弃浏览器优化能力
它最适合做“结构快照”：把已知稳定、复用频繁的 DOM 片段（如表格行、卡片骨架、空状态提示）提前定义好，运行时只克隆 + 填数据，不改结构。
- 模板内容应尽量静态，避免内联
style或复杂嵌套逻辑 - 用
document.importNode(template.content, true)替代cloneNode，更语义且兼容 Shadow DOM - 批量插入多个实例时，先用
DocumentFragment聚合，再一次性appendChild到真实 DOM - 示例：
<template id="user-card"><article class="card"><h3 class="card__name"></h3>
<p class="card__role"></p>
</article></template><script>
const tmpl = document.getElementById('user-card');
const frag = document.createDocumentFragment();
for (const user of users) {
const clone = document.importNode(tmpl.content, true);
clone.querySelector('.card__name').textContent = user.name;
clone.querySelector('.card__role').textContent = user.role;
frag.appendChild(clone);
}
document.getElementById('list').appendChild(frag); // 仅一次重排
</script>
比 innerHTML + 字符串模板（小规模场景）
当模板极简单（≤3 个字段、无事件绑定、无子组件），直接拼字符串反而更快——跳过 DOM 解析、克隆、fragment 中转全部开销。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
String.raw或模板字面量避免 XSS 风险（必须对变量做textContent级转义） - 禁止拼接用户输入到 HTML 属性或事件中，如
onclick="do(${user.id})" - 适合列表项、徽章、状态标签等原子 UI 单元
- 示例：
const renderUserBadge = (user) =>
`<span class="badge" title="${escapeHtml(user.role)}">
${escapeHtml(user.name)}
</span>`;
真正要警惕的性能黑洞：CSS-in-JS 或内联 style 的模板化滥用
不少“现代模板方案”鼓励用 JS 对象生成 style 字符串（如 { color: user.themeColor }），再塞进 element.style.cssText。这会强制同步样式计算，打断渲染流水线。
- 所有动态样式应预先定义 CSS 类名，通过
classList.toggle()切换 - 避免在循环中读取
offsetHeight、getComputedStyle等触发重排/重绘的 API - 如果必须动态颜色，用 CSS 自定义属性（
--user-color）+ :root 设置，JS 只改属性值
模板性能瓶颈从来不在“写法多酷”，而在是否尊重浏览器渲染机制——结构复用靠 ，小片段靠字符串，样式控制靠类名，数据驱动靠属性而非内联 style。漏掉任意一环，优化就归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
