我正在用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在这样做时会在内部使用片段。
根据我的经验,按字符串追加元素比按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);
}
如果你希望用户点击,我认为在点击之前创建图标是个好主意。
您可以使用可见性特性,而不是显示/隐藏来切换显示特性。当可见性从隐藏更改为可见时,浏览器不需要重新计算布局。