在Web前端开发中，当需要把成百上千条数据渲染成DOM节点并插入页面时，性能往往成为瓶颈。jQuery提供了多种操作DOM的接口，其中html()方法可以一次性设置容器内部的HTML字符串，而基于原生DocumentFragment的组装方式则先在内存中构建节点再统一挂载。这两种方案在实现大量节点插入时的表现并不直观，需要从浏览器渲染机制和jQuery源码层面去分析。
原理剖析：浏览器渲染与重排成本
浏览器在解析HTML字符串或插入节点时，会经历构建DOM树、计算样式、布局（重排）和绘制等阶段。每一次对文档流中节点的修改，都可能引发一定程度的重排。如果采用循环方式逐个用jQuery的append()向页面容器插入节点，每次插入都会让浏览器重新计算布局，当节点数量很大时，这种频繁重排的代价极高。
html()方法的内部逻辑是先把字符串交给浏览器解析成HTML片段，再替换掉原容器的所有子节点。因为只做了一次内容替换，所以仅触发一次重排。不过，浏览器解析长字符串本身需要时间，且jQuery在设置innerHTML前后会执行一些清理和事件解绑操作，这会附加一定开销。
原生DocumentFragment是一个轻量级的文档片段，它不属于活动文档树，因此在上面添加节点不会引发页面重排。开发者可以先用循环把节点创建好并追加到片段中，最后把片段整体插入目标容器。由于片段的子节点在被插入时会一次性转移到文档中，所以也只产生一次重排。jQuery通过$(document.createDocumentFragment())对此做了封装，但每次调用jQuery方法都会经过内部函数栈，增加了调用成本。
代码实践：两种插入方式示例
下面展示使用html()批量插入的写法。我们先拼装一个长字符串，然后一次性赋值给容器。这种方式代码简短，适合结构规则的模板渲染。
var list = [];
for (var i = 0; i < 1000; i++) {
list.push('<li>项目 ' + i + '</li>');
}
var htmlStr = '<ul>' + list.join('') + '</ul>';
$('#container').html(htmlStr);
上述代码在拼接字符串阶段纯属内存操作，只有最后一行html()触发了一次解析与重排。对于现代浏览器，解析一千个简单<li>的耗时通常在几毫秒内。但如果字符串中包含复杂属性或嵌套结构，解析成本会明显上升。
接下来是基于DocumentFragment的写法。我们利用jQuery创建片段，逐个构建元素后追加，最后整体插入。
var frag = $(document.createDocumentFragment());
for (var i = 0; i < 1000; i++) {
frag.append('<li>项目 ' + i + '</li>');
}
$('#container').append(frag);
这段代码里，frag.append()每次调用都经过jQuery的事件与特性处理模块，虽然不引发重排，但函数调用次数和html()的一次性解析相比反而可能更多。如果换成原生方式创建li再追加到片段，性能会进一步提升，但就脱离了纯jQuery写法。实际项目中要权衡代码统一性与执行效率。
性能对比与选型建议
我们在本地用一千到一万条数据做多组测试，发现当节点数低于三千且结构简单的场景下，html()因省去了大量jQuery方法调用，总体耗时往往低于DocumentFragment封装写法。而当节点数超过五千，且需要绑定事件或添加复杂属性时，预先在片段中用原生DOM构建再整体插入，能更好控制内存和重排节奏。
另一个常被忽视的点是事件处理。如果容器原本绑定了委托事件，使用html()替换内容不会移除委托监听，因为监听在父级；而DocumentFragment插入的新节点同样适用委托。但若在片段内就直接绑定事件，则会在插入前创建大量闭包，增加内存压力。因此推荐统一使用事件委托，不在批量构建时逐个绑定。
综合来看，没有绝对更快的方案。数据量小、结构固定时优先用html()保证代码简洁；数据量大且需精细控制节点生成逻辑时，用原生DocumentFragment配合少量jQuery辅助更稳妥。理解两者底层差异，才能避免在不必要的位置做过度优化，也能在真正遇到卡顿时有针对性地重构。
jQueryDOM_insertionDocumentFragment修改时间：2026-08-17 11:24:13