3

我正在使用 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）

4

3 回答 3

3

在内存中构建表并且只更改一次 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 在这样做时会在内部使用片段。

于 2013-07-05T15:30:43.670 回答
0

如果您希望用户点击，我认为在点击之前创建图标是个好主意。

您可以使用可见性属性，而不是切换显示属性的显示/隐藏。当可见性从隐藏变为可见时，浏览器不需要重新计算布局。

于 2013-07-05T15:55:29.240 回答
0

以我的经验，按字符串附加元素比按 DOM 创建元素的性能最差。

所以尝试这样的事情：

if (in_group(datasets[i].id)) {
   var i = document.createElement('i');
   i.className = 'icon-remove click_icon remove_group';
   i.style.float = 'right';
   first_cell.appendChild(i);
}
于 2013-07-05T15:26:44.903 回答