我正在使用jQuery构建电子表格编辑器,并且遇到大表的性能问题.
该表包含许多数据集,单击一个数据集,会将图标添加到其他数据集的第一个单元格中.代码如下：

$('.click_icon').remove();
for (var i = 0; i < datasets.length; i++) {
  var first_cell = $('td.content[dataset="' + datasets[i].id + '"]').filter(':first');
  if (in_group(datasets[i].id)) {
    first_cell.append('<i class="icon-remove click_icon remove_group" style="float:right"></i>');
  } else {
    first_cell.append('<i class="icon-magnet click_icon add_group" style="float:right"></i>');
}

使用500个数据集,大约需要5秒钟. in_group()只是一个小函数,它检查集合是否与所选数据集在同一组中.

我想知道在单击之前创建图标并使用show()hide()会更快吗？还有其他想法吗？

我在Ubuntu上使用Chromium. (版本28.0.1500.52 Ubuntu 12.04)

解决方法:

在内存中构建表,仅更改一次DOM：

$('.click_icon').remove();
var table = $('table');
var clone = table.clone(true);

for (var i = 0; i < datasets.length; i++) {
  var _class = in_group(datasets[i].id) ? 
                     'icon-remove click_icon remove_group' : 
                     'icon-magnet click_icon add_group',
      elem   = $('<i />', {'class': _class, style:'float:right'});

  $('td.content[dataset="' + datasets[i].id + '"]', clone).filter(':first')
                                                          .append(elem);
}

table.replaceWith(clone);

这是一个一般示例,您可能必须对其进行调整以使其与标记一起正常工作.
我通常会使用纯JS来提高性能,并使用documentFragments,但我认为jQuery在以这种方式内部使用片段时.