首屏加载慢的根源在于资源冗余、渲染阻塞、网络延迟、框架开销及第三方脚本干扰；需通过按需加载、代码拆分、关键CSS内联、CDN加速、SSR和服务端优化等综合手段提升FCP。
为什么里塞图片仍会触发首屏加载阻塞
因为内容虽不渲染，但浏览器解析HTML时仍会扫描其内部资源声明——<img src="logo.png">会被提前发现并加入预加载队列，哪怕模板后续从未被克隆。这不是 bug，是规范行为。
- 验证方式：打开 DevTools → Network 面板，刷新页面，观察 logo.png 是否出现在 early request 列表中
- 正确做法：把
src换成data-src，克隆后由 JS 手动赋值img.src = img.dataset.src - 更彻底的方案：用
<picture>+media属性配合IntersectionObserver，只对进入视口的模板实例触发加载
FCP ≤1.2s 要求下，如何安全复用而不拖慢首屏
关键不是“少用”，而是“分层控制”——首屏必须用内联 HTML 渲染，非首屏才走 <template> + JS 实例化。否则 FCP 一定超标。
- 首屏卡片、导航栏、主标题等，直接写在 HTML 中，不包裹
<template> - 评论区、相关推荐、底部友情链接等，用
<template id="comments-template">声明，初始 DOM 中完全不存在 - JS 初始化逻辑必须放在
<script defer>或DOMContentLoaded后，不能阻塞 HTML 解析 - 避免在
document.querySelector('main').innerHTML += template.innerHTML这种写法——它会销毁已有事件监听器，且触发重排
DOM节点≤1200 条件下，深层嵌套容器怎么拆而不破功能
不是删标签，是换语义+改 CSS。很多“嵌套爆炸”容器其实只是为定位或样式隔离而存在，display: contents 是最轻量的解法，但要注意兼容性断点。
- 先运行
document.querySelectorAll("*").forEach(el => el.children.length > 5 && console.log(el))定位问题节点 - 若该容器无语义、无 JS 绑定、无 aria 属性，直接删掉，让子元素自然提升层级
- 若需保留数据属性（如
data-testid="card-body"），改用display: contents，但确认 Safari ≥15.4（旧版 Safari 会忽略） - 若容器承载了
aria-live或role="region"，保留标签，但用container.replaceWith(...children)把子节点提一级，再给父级加role和aria-label
Layout Shift Score ≤0.1 时，组件挂载为何仍导致 CLS 波动
CLS 不只看尺寸变化，也记位置偏移。用 appendChild() 插入新节点，若前面有浮动元素、未设宽高的图片、或 font-display: swap 的字体回流，都会引发布局位移。
立即学习“前端免费学习笔记（深入）”；
- 所有
<template>实例化前，确保父容器已设明确高度（如min-height: 200px）或占位符 - 图片必须带
width和height属性，或用aspect-ratio（Chrome 103+ / Firefox 119+） - 避免在挂载后立即读取
offsetHeight，这会强制同步布局计算，放大位移幅度 - 用
getBoundingClientRect()对比挂载前后位置，定位具体哪一行元素跳动
<template> 不是互斥选项，而是协作关系。<main> 内可放真实首屏结构，<aside> 里用 <template> 加载侧边推荐——但两者都得满足同一套性能硬指标，不能因“用了模板”就放松对 DOM 规模或布局稳定性的约束。 
