details标签不支持懒加载，子节点在html解析阶段即构建dom，仅默认隐藏；含大量媒体或复杂结构时仍拖慢domcontentloaded、增加内存占用、影响fcp。
details标签本身不懒加载，子节点仍会解析构建
很多人以为<details></details>天然支持懒加载——其实浏览器在HTML解析阶段就会构建全部子节点DOM，只是默认display: none不渲染。对含大量图片、iframe或复杂表格的详情模块，这仍会显著拖慢DOMContentLoaded，内存占用照旧，首屏FCP也卡在占位符上。
真实问题表现：DOMContentLoaded延迟 >1.2s、弱网下滚动卡顿、低端机内存告警。这不是JS执行慢，是HTML解析器把整个<summary></summary><div>...500行图文...</div>全吃进去了。
- 别写
<details><summary>展开详情</summary><div id="detail-content"></div></details>然后靠JS填内容——<div>标签本身已参与DOM树构建 <li>真正“未加载”的写法是把内容包进<code><template id="detail-fragment"></template>，它完全不触发解析、不计算CSSOM、不占内存 - 用
IntersectionObserver监听<details></details>进入视口后，再克隆template.content并append到目标容器 - 每次只插入200–500行（视节点复杂度调整），用
requestIdleCallback排队；兼容性要求高时退化为setTimeout(() => {}, 0)（别写1毫秒，浏览器会节流到4ms） - 每批插入后检查
performance.now()，若单批耗时 >16ms（掉帧阈值），自动减半批次大小 - 批量插入务必用
DocumentFragment收集节点，最后一次性appendChild，避免反复重排 - 超时控制必须加：
AbortController设8s上限，超时显示「加载失败，请重试」按钮 - 克隆后需手动绑定事件：
fragment.querySelectorAll('button').forEach(btn => btn.addEventListener('click', handler)) - 更稳妥的做法是改用事件委托：
container.addEventListener('click', e => { if (e.target.matches('[data-action="submit"]')) {...} }) -
<template></template>里的HTML片段不能带<style></style>或<script></script>，所有样式走外链CSS，脚本由主页面统一管理 - 如果片段含
id属性（如<input id="sku-color">），插入前必须加哈希前缀或改用data-id，否则多个模块重复插入会冲突 - 别用
el.setAttribute('hidden', '')，它不更新el.hidden布尔值，后续el.hidden = false可能失效 - 推荐时机：等
el.offsetParent !== null（layout完成）后再设el.hidden = true - 显示前记得清空内联样式：
el.style.display = ''，否则el.hidden = false无效 - 最稳方案是CSS控制：
.loading { visibility: hidden; } .loaded { visibility: visible; }，JS只切class
异步加载后插入DOM必须避开同步阻塞
fetch拿到HTML片段后直接el.innerHTML = htmlString，浏览器会同步执行DOM构建+布局+绘制，单次操作可能卡主线程数十秒——尤其当片段含6万行表格或10MB富文本时，这不是网络慢，是渲染引擎主动放弃响应。
关键不是“快”，而是“让出主线程”。必须把插入动作拆成微任务，并控制每批节点数量。
事件绑定和样式继承容易漏掉
克隆<template></template>内容后，addEventListener不会继承，样式也可能因作用域丢失——特别是用CSS-in-JS或Shadow DOM的场景。用户点开<details></details>后发现按钮没反应、字体错乱，八成是这里漏了。
hidden属性在动态插入时会闪一下
给异步插入的元素直接写hidden属性，几乎一定会触发FOUC（Flash of Unstyled Content）。因为DOM插入和属性生效之间存在微小时间差，浏览器先按默认样式渲染，再隐藏——尤其在低端机上肉眼可见白屏一闪。
<details></details>被嵌在flex或grid容器里时，动态高度变化会连锁触发父级重排。这时候height: 0; overflow: hidden;过渡动画反而比hidden更可控。
