Fragment + rAF 能提升性能是因为 Fragment 在内存中操作不触发重排，rAF 将操作延至重绘前并支持分帧执行，避免主线程长时间阻塞。
用 document.createDocumentFragment 搭配 requestAnimationFrame 批量插入 DOM，核心是“攒操作、避重排、分帧执行”——先在内存中构建完整结构，再一次性挂载；同时把大批量操作拆到多个空闲帧里，避免主线程长时间阻塞。
为什么 Fragment + rAF 能提升性能
直接循环 appendChild 多个元素会触发多次样式计算和布局（reflow），尤其在父容器已挂载时。Fragment 是轻量文档片段，不属主 DOM 树，往它里面添加节点不会触发任何渲染；而 requestAnimationFrame 确保操作发生在浏览器下一次重绘前，且可主动切分任务，避开 16ms 长任务警告。
基础组合写法：一次批量插入
适用于中等数量（如几十到两百个）节点，希望一次完成但不卡顿：
- 创建 DocumentFragment
- 循环生成并 append 到 fragment（不操作真实 DOM）
- 用
requestAnimationFrame包裹最终的parent.appendChild(fragment)
示例：
function batchAppend(parent, items) {
const frag = document.createDocumentFragment();
items.forEach(item => {
const el = document.createElement('div');
el.textContent = item;
frag.appendChild(el);
});
requestAnimationFrame(() => {
parent.appendChild(frag);
});
}
进阶分帧处理：超大批量（如上千项）
当节点数远超百级，单次构建 fragment 本身也可能耗时（如含复杂模板、事件绑定）。此时需把“创建 + 插入”按帧拆解：
- 设定每帧处理数量（如 20～50 个），避免单帧超 8ms
- 用递归或循环调用
requestAnimationFrame，每次只处理一批 - fragment 可复用：每帧新建一个，append 后立即插入，不累积到最后一帧
关键点：不是“所有节点建完再插”，而是“建一批、插一批”，既控帧耗，又早见内容。
注意事项与常见坑
- Fragment 不支持 querySelector 等查找方法：它只是容器，没完整 DOM 接口，需在插入后查真实节点
- rAF 不保证执行时机精确：它只是“下一帧前”，若前一帧卡住，你的回调会延后；别依赖它做精确计时
-
避免在 rAF 回调里再触发强制同步布局：比如读取
offsetHeight后立刻改样式，可能引发额外重排 - Fragment 插入后自动清空：不能重复使用，每次都要新建
对比直接插入的收益
以插入 500 个 <li> 为例实测（Chrome DevTools Performance 面板）：
- 直接循环 append：触发 500 次 layout，总耗时约 42ms，页面明显卡顿
- Fragment + 单次 rAF：layout 仅 1 次，总耗时约 8ms
- 分帧（每帧 30 个）+ rAF：layout 17 次（≈500÷30），但每帧均 ≤6ms，滚动/交互无感知
本质不是减少 layout 次数，而是把代价从“一次重压”变成“多次轻载”，让浏览器有喘息空间。
