比innerhtml快，因其内容为惰性documentfragment，不解析、不执行脚本、不触发布局；需用importnode克隆使用，避免直接appendchild导致原节点丢失。
HTML模板本身不执行逻辑，但它的结构和组织方式直接决定组件渲染是否卡顿——关键不是“写得漂亮”，而是让浏览器少做无用功。
为什么<template></template>比innerHTML快
每次用innerHTML = htmlStr插入内容，浏览器都要重新解析字符串、构建DOM、计算样式、触发布局。而<template></template>的内容是惰性DocumentFragment，不参与渲染流程，也不执行脚本、不加载资源。
- 必须用
document.importNode(template.content, true)克隆，不能直接appendChild(template)（否则原节点被移走，下次调用就空了） -
template.content是DocumentFragment，不能直接querySelector，得先挂载或用querySelectorAll查 - 模板里写
<script></script>或<style></style>会被忽略；事件监听器必须克隆后手动绑定 - 嵌套超过3层时，手拼
document.createElement的JS执行时间明显高于克隆template.content
服务端返回的HTML片段怎么安全注入
动态fetch回来的HTML片段如果直接塞进innerHTML，容易因标签未闭合、属性解析错误或意外执行脚本而出错。
- 服务端返回的必须是纯结构（不含
/），否则插入后会破坏DOM树 - 不要用
innerHTML直接赋值整个响应体；应创建临时template元素，设其innerHTML，再取.content克隆 - 若片段含
id或data-状态，需手动重置（避免ID冲突、状态错乱） - IE完全不支持
<template></template>，如需兼容，fallback到<script type="text/template"></script>+ 正则提取
shrinkWrap和onlyRenderTheseTags在Flutter_html中怎么用
这些不是“锦上添花”的配置项，而是直击渲染树膨胀痛点的开关。
-
onlyRenderTheseTags: {'p', 'h1', 'img'}能跳过<table> <code><iframe></iframe>等复杂标签的解析和布局计算，尤其适合富文本编辑器预览场景 -
shrinkWrap: true让组件只占内容所需空间，在ListView里渲染多个HTML片段时，可避免不必要的无限高度测量 -
maxLines配合textOverflow: TextOverflow.ellipsis对长文本截断，防止渲染超长段落拖慢帧率 - 注意：
onlyRenderTheseTags不包含时，Flutter_html会自动补全，但可能影响样式继承链
真正容易被忽略的，是hydration边界问题：服务端已输出结构，客户端又用<template></template>补内容，ID、class、data-属性一旦重复或冲突，React/Vue/Flutter都可能丢状态或重绘异常——这不是性能问题，是渲染正确性问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
