核心是减少DOM操作开销、避免强制同步布局、降低JS主线程负担；应批量创建插入节点、用DocumentFragment或innerHTML一次性挂载，避免布局抖动，优先CSS类切换与transform/opacity动画，懒加载非关键模板，优化表达式执行效率。
核心是减少模板渲染过程中的 DOM 操作开销、避免强制同步布局、降低 JavaScript 主线程负担，并让浏览器更高效地完成构建渲染树和绘制。重点不在“写更快的模板语法”，而在于控制模板如何被生成、插入、更新。
批量创建与插入 DOM 节点
模板渲染常伴随大量元素创建（如列表循环），逐个 appendChild 会反复触发回流。应统一在内存中组装，再一次性挂载。
- 用
DocumentFragment收集所有新节点，最后只调用一次appendChild - 对纯 HTML 字符串模板，先拼成完整字符串，再赋值给
innerHTML（适合静态内容；注意 XSS 风险） - 避免在循环中读取
offsetHeight、clientWidth等布局属性，它们会强制刷新样式并触发回流
减少模板更新时的重排重绘
动态模板（如 Vue/React 的响应式更新）若频繁修改样式或几何属性，会持续打断渲染流程。
- 用 CSS 类切换替代直接操作
element.style.xxx，把样式变更集中到 class 中 - 动画类操作优先使用
transform和opacity，它们不触发回流，且可启用 GPU 加速 - 需要读写混合操作时（如先读位置、再改位置），把所有“读”集中到前面，所有“写”集中到后面，避免布局抖动
延迟非关键模板的渲染
首屏外或交互后才需展示的内容，不必随主模板一起解析和渲染。
立即学习“Java免费学习笔记（深入）”；
- 对长列表做虚拟滚动（virtual scroll），只渲染可视区域内的模板片段
- 用
IntersectionObserver触发懒加载模板块，而非监听scroll事件 - 服务端渲染（SSR）+ 客户端水合（hydration）时，对非首屏组件标记
client:only或延迟 hydrate
优化模板逻辑本身的执行效率
模板中嵌入的表达式、计算属性、条件判断如果过于复杂，会在每次 re-render 时重复执行。
- 对高开销计算（如深层对象遍历、格式化）使用记忆化（memoization），缓存结果
- 避免在模板中调用函数（如
{{ formatName(user) }}），改为预计算好字段（user.formattedName） - 用
for循环代替forEach或map渲染模板项，减少函数调用开销
