更高效的jQuery编码：两组代码哪种更高效及原因解析

要判断哪组jQuery实现更高效，核心看DOM操作次数、选择器复用、缓存机制这些关键指标。我拿两组典型的场景代码来做对比分析：

示例代码组A（低效写法） #

// 循环内频繁操作DOM
for (let i = 0; i < 100; i++) {
  $('#list').append('<li>Item ' + i + '</li>');
}

// 重复查询同一DOM元素
$('#btn').click(function() {
  $('#text').css('color', 'red');
  $('#text').css('font-size', '16px');
  $('#text').text('Updated content');
});

示例代码组B（高效写法） #

// 先在内存拼接DOM片段，一次性插入
let listHtml = '';
for (let i = 0; i < 100; i++) {
  listHtml += '<li>Item ' + i + '</li>';
}
$('#list').append(listHtml);

// 缓存DOM元素+链式调用
const $textEl = $('#text');
$('#btn').click(function() {
  $textEl.css({
    'color': 'red',
    'font-size': '16px'
  }).text('Updated content');
});

为什么组B的效率更高？ #

• 减少DOM操作次数：DOM操作是浏览器性能开销最大的操作之一。组A在循环里每次调用append都会直接修改DOM，触发100次重排/重绘；组B先在内存中拼接好HTML，只做1次DOM插入，大幅降低浏览器的性能消耗。
• 缓存DOM元素：组A每次操作#text都重新执行$('#text')，这会让jQuery重新遍历DOM树查找元素；组B把查询到的元素对象缓存到变量中，后续直接复用，避免了重复的DOM查询开销。
• 链式调用优化：组B利用jQuery的链式调用特性，减少了对同一元素的多次引用，既简化了代码，也减少了内部上下文切换的额外消耗。

最后补充两个jQuery性能优化的核心原则：

• 优先使用ID选择器，因为jQuery底层会直接调用原生的document.getElementById，速度最快；尽量避免过于复杂的层级选择器（比如div.container ul li a）。
• 对需要多次操作的元素，一定要提前缓存，避免实时重复查询DOM。

内容的提问来源于stack exchange，提问作者wuzz