加快列表的 jQuery 操作

Speed up jQuery manipulation of a list

本文关键字：jQuery 操作 列表      更新时间：2023-09-26

我的应用程序有一长串对象，其宽度需要通过jQuery修改。目前我正在使用这样的代码：

$('#my_list div.text_field').each(function() {
  // Cache objects we're going to use multiple times.
  var $textField = $(this);
  var $listContents = $textField.closest('div.list_contents');
  // Find widths.
  var contentsWidth = $listContents.outerWidth();
  var avatarsWidth = $listContents.find('div.avatars').outerWidth();
  var tagsWidth = $listContents.find('div.tags').outerWidth();
  var textLeft = $textField.position().left;
  // Update the width.
  var newTextWidth = contentsWidth - textLeft - avatarsWidth - tagsWidth;
  $textField.css({ width: newTextWidth });
});

但是，当有数百个对象要操作时，需要一段时间(> 1 秒(。知道我怎样才能让它更快吗？我应该完全避开jQuery并使用本机JS吗？

好的，通过一系列改进，我能够将运行此代码所需的时间(在Chrome 18上对一系列~600个项目(从3000多毫秒减少到70毫秒。

最剧烈的改进来自于在原始HTML元素上使用offsetWidth，而不是jQuery的outerWidth((语句。仅此一项就减少了超过50%的时间：

avatarsWidth = $listContents.find('div.avatars')[0].offsetWidth;

第二个最剧烈的变化来自减少我所做的 DOM 修改的数量。在上面的代码中，我遍历元素，计算它们的宽度，然后立即将这些宽度应用于 DOM。在改进的代码中，我仍然循环计算宽度，但是我随后存储这些宽度，从 DOM 中分离元素，应用存储的宽度，然后重新附加它们。感谢@muffel这个想法。这减少了总时间的 30% 以上：

$('#my_list div.text_field').each(function() {
  var $textField = $(this);
  // ...
  var newTextWidth = contentsWidth - textLeft - avatarsWidth - tagsWidth;
  $textField.attr('data-width', newTextWidth);
});
$('#my_list')
  .detach()
  .find('div.text_field')
    .each(function() {
      $(this).css({ width: $(this).attr('data-width') });
    })
    .end()
  .appendTo('#container');

第三大改进来自减少我遍历DOM的次数。我没有每次通过循环选择元素，而是预先选择了它们，然后引用了循环中的索引。这构成了其余改进的大部分：

var $avatars = $('#my_list .avatars');
// ...
$('#my_list div.text_field').each(function(i) {
  // ...
  avatarsWidth = $avatars.eq(i).offsetWidth;
  // ...
});

希望这对某人有所帮助！

对于初学者来说，你不需要用$(this(来包装它...除非我错过了什么(我可能是(，否则您应该能够在每个$textfield上下文中使用"this"......这将为您节省函数调用和 var 创建。还要将 var 声明移出函数...这也将节省更多的周期。让我知道这是否加快了速度。

相关文章：