不能把整个详情页写成一个大<body>，因为全量HTML一次性输出会导致首屏渲染阻塞严重，尤其在弱网或低端设备上DOM构建耗时拖慢用户感知；电商详情页含5–10个模块，应按优先级拆分、懒加载与独立缓存，如轮播图和价格同步输出，详情图和评价延迟fetch，并用<template>预置结构配合fetch()加载自包含HTML片段，避免DOMContentLoaded延迟>1.2s、FCP卡在占位符及SEO抓取无内容等问题。
为什么不能把整个详情页写成一个大 <body>
页面越长，首屏渲染阻塞越明显；尤其在弱网或低端设备上，DOM 构建耗时直接拖慢用户感知。电商详情页动辄含 5–10 个模块（轮播、标题、SKU、参数表、详情图、评价、推荐），全量 HTML 一次性吐出，不仅服务端压力大，还无法按需加载、按优先级缓存。
真实问题常表现为：DOMContentLoaded 延迟 >1.2s、First Contentful Paint 卡在“加载中”占位符、SEO 抓取只拿到骨架没内容。
- 轮播图和价格是首屏强相关，必须随 HTML 同步输出
- 图文详情、用户评价这类模块可延迟 fetch，且适合单独缓存（比如详情图更新频率低，但评价每小时都在变）
- 移动端需优先加载折叠面板的
<summary>，而展开后的内容可懒加载
<template> + fetch() 拆分模块的实际写法
不是用 JavaScript 拼字符串，而是用原生 <template> 预置结构，配合 fetch() 加载对应模块 HTML 片段。关键点在于：片段必须是完整、自包含的 DOM 子树，不能依赖外部样式或脚本上下文。
例如，SKU 选择器模块的 HTML 片段（sku-section.html）应包含：
立即学习“前端免费学习笔记（深入）”；
<fieldset data-module="sku"> <legend>颜色 / 容量</legend> <input type="radio" name="color" value="black" id="c1"><label for="c1">黑色</label> <input type="radio" name="color" value="white" id="c2"><label for="c2">白色</label> </fieldset>
- 所有
id和for必须唯一，避免多个 SKU 模块插入后冲突（建议加哈希前缀或用data-属性替代） - 片段里不要写
<style>或<script>，样式统一走外链 CSS，交互逻辑由主页面 JS 统一绑定 - fetch 时加
credentials: 'same-origin'，否则带登录态的 SKU 库请求会失败
如何让 <details> 折叠面板真正懒加载内部内容
很多人误以为 <details> 天然支持懒加载——其实不然。浏览器会解析并构建全部子节点，只是默认不渲染。对含大量图片或 iframe 的详情模块，这仍会造成内存和解析开销。
正确做法是：初始状态只放 <summary>，点击后再 fetch() 并 insertAdjacentHTML 插入内容：
document.addEventListener('click', e => {
if (e.target.matches('summary[data-lazy]')) {
const details = e.target.closest('details');
if (!details.hasAttribute('data-loaded')) {
fetch('/api/detail-desc?sku=12345')
.then(r => r.text())
.then(html => {
details.insertAdjacentHTML('beforeend', html);
details.setAttribute('data-loaded', '');
});
}
}
});
- 必须检查
data-loaded，否则多次点击会重复插入 - 服务端返回的 HTML 片段里，
<img>要带loading="lazy"，且src是 WebP 格式路径 - 不要用
innerHTML = html，它会销毁已绑定的事件监听器；insertAdjacentHTML更安全
Nginx 本地缓存 HTML 片段时的路径与失效陷阱
当用 Nginx 缓存 /fragments/sku-section.html 这类路径时，容易忽略两个现实约束：
- 路径不能含查询参数（如
/fragments/sku-section.html?sku=12345），Nginx 默认不缓存带?的 URL；必须用map指令把参数转为路径变量，或改用 POST + body 传参 - 缓存失效时间（
expires 10m）必须比业务数据变更周期短；若商品参数 5 分钟就可能更新，设 10 分钟缓存会导致用户看到过期信息 - 如果用
proxy_cache_bypass $cookie_user_id让登录用户绕过缓存，要确认 Cookie 名拼写准确——漏掉下划线或大小写错误，就会导致全员命中缓存
最常被跳过的细节是：Nginx 缓存 key 默认不含 Host 头，多租户场景下不同域名共用同一缓存区，会导致 A 站的 SKU 片段被 B 站意外复用。必须显式配置 proxy_cache_key "$scheme$request_method$host$request_uri";。
