<template>对首屏无直接帮助，因其内容被浏览器跳过解析、不构建DOM、不触发请求；仅适合存放非首屏内容，且需避免hydration冲突与误用。
<template> 标签本身不参与首屏渲染，也不触发网络请求或执行逻辑，它只是个“离线 DOM 片段容器”。想靠它提速首屏，关键不是用不用，而是**什么时候、怎么把它里面的内容塞进页面**——用早了白搭，用错了反而拖慢。
为什么<template>对首屏没直接帮助
浏览器解析到 <template> 时，会跳过其内容，不构建 DOM 节点、不加载 src 或 href、不执行内联脚本。这意味着：
– 它不会提升 FCP（首次内容绘制）
– 它不减少 HTML 体积（只是把 HTML 搬了个地方）
– 它不替代关键 CSS 内联或 defer 脚本
常见误操作：
– 把整个首屏结构包进 <template>，再用 JS 插入 → 首屏 DOM 延迟生成，FCP 直接变差
– 在 <head> 里放大量 <template> → 增加 HTML 解析开销，无收益
真正能提升首屏的用法：只存非首屏内容
把 <template> 当作“延迟加载的 HTML 缓存区”，专用于那些**绝对不出现在首屏**的模块：
– 弹窗（modal）、抽屉（drawer）、表单错误提示模板
– 分页器下一页、评论区折叠态内容
– 多语言文案占位符（配合 i18n 服务端注入）
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操要点：
– 模板必须放在 </body> 前，避免阻塞主 HTML 解析
– 模板内不能含 <script> 或 <link>，否则插入时可能触发额外请求或执行
– 若模板含图片，src 必须为空或占位符，真实 src 留到 JS 插入后动态赋值，防止提前加载
和 SSR / hydration 配合时容易翻车
在 Next.js、Nuxt 或自研 SSR 中，若服务端已输出首屏 DOM，客户端又用 <template> + JS 重写同一区域，会导致：
– hydration 失败（DOM 不匹配）
– 首屏内容闪动或重复渲染
– CLS（累积布局偏移）飙升
安全做法：
– <template> 只用于服务端未输出、纯客户端动态生成的内容
– 若需服务端预置，直接输出真实 DOM，别套一层 <template>
– 检查框架文档是否对 <template> 有特殊 hydration 行为（如 Vue 3 的 v-is 会忽略它）
比<template>更值得优先优化的三件事
多数人花时间调 <template>，却漏掉真正卡首屏的环节：
– 首屏图片没设 width/height，导致 LCP 延迟且触发 CLS
– 关键 CSS 没内联，还在等 main.css 下载解析
– <script src="app.js"> 没加 defer，直接挂在 <head> 里白屏
这些点每改一个，FCP/LCP 改善幅度远大于折腾 <template> 的存放位置或克隆方式。先跑通 Chrome DevTools 的 Coverage 和 Waterfall，确认瓶颈真不在它身上，再考虑要不要用。
