template克隆比innerHTML快，因content仅内存复制不触发解析/样式/布局；需用importNode克隆，不可appendChild；嵌套超6层时克隆仍优于手拼DOM；IE需fallback为DOMParser；SSR需统一hydration命名防冲突。

为什么

不是因为语法高级，而是浏览器根本没把它当“要渲染的东西”——<template></template>内容天生不参与HTML解析、不触发样式计算、不加载资源，只存为内存里的DocumentFragment。你用innerHTML插入字符串时，浏览器得从头解析标签、创建节点、匹配CSS、预备布局；而克隆template.content只是内存复制，JS执行完立刻能插进DOM。

• 必须用document.importNode(template.content, true)，不能appendChild(template)（那会把模板移走，下次就空了）
• template.content不是普通节点，不能直接querySelector，得先挂载或用querySelectorAll在fragment上查
• 模板里写<script></script>或<style></style>会被忽略，事件监听器也得克隆后手动绑定

嵌套超过6层时，

手写一堆document.createElement+setAttribute+appendChild看似可控，实际每步都触发重排预备和样式查询。尤其当结构嵌套超3层，JS执行时间明显高于克隆template.content——浏览器对<template></template>的解析做了专项优化，克隆成本远低于逐节点构造。

• 服务端返回的HTML片段，建议先塞进临时<template></template>再取.content，避免innerHTML误解析闭合错误
• SSR输出的结构若含data-reactroot等标记，注意其父容器是否无意加深了嵌套层级，影响克隆后插入的渲染效率
• 移动端低端设备上，手拼DOM的JS执行卡顿比克隆更易被感知

IE不支持

IE完全不识别<template></template>，但<script type="text/template"></script>能被它当作普通文本节点忽略，内容可安全提取。用正则或textContent读取后，再用DOMParser或临时div.innerHTML转成节点——虽然慢一拍，但至少不报错。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 别用innerHTML直接赋值原始字符串，IE下容易因标签未闭合导致解析中断
• 提取后需手动处理ID重复、事件丢失、src/href相对路径等问题，这些在原生<template></template>里不存在
• 现代项目若已放弃IE，就别加这套fallback逻辑，代码反而更干净

动态补内容时最容易忽略的 hydration 边界

服务端已输出部分结构（比如SSR页面），又用<template></template>动态补非首屏模块，两者的DOM ID、class、data属性若冲突，会导致hydration失败或状态错乱。这不是渲染慢的问题，是功能出错。

立即学习“前端免费学习笔记（深入）”；

• 确保服务端与客户端模板使用同一套命名规则，比如用data-hydrate-id代替id
• 克隆插入前，检查是否存在同名ID节点，必要时用Math.random()生成唯一后缀
• 表格单元格（<td>）里嵌套<code><div>再套<code><template></template>，极易触发同步Layout，优先改用<figure></figure>或直接给<td>加样式 </td>