在处理大型DOM元素时加速jQuery空()或replaceWith()函数
让我首先为没有给代码片段道歉。我正在做的项目是专有的，恐怕我不能确切地显示我在做什么。然而，我会尽我最大的努力来描述。
下面是我的应用程序中发生的事情的细目：
用户单击一个按钮(如果需要的话，我可以更改这个数字)，以data-table
- Each行的形式检索表中的图像列表，其中包含8个数据单元格，每个单元格依次包含一个超链接
- ，每个用户的请求最多可以包含50行(如果需要，我可以更改这个数字)
- ，这意味着该表包含800多个单独的DOM元素
H 111我的分析显示jQuery("#dataTable").empty()和jQuery("#dataTable).replaceWith(tableCloneObject)占用我整个处理时间的97%，平均花费4-6秒到complete.
。
在处理需要删除/替换的大量DOM元素时，我正在寻找一种方法来加快上述任何一个jQuery函数的速度。希望我的解释能帮上忙。
回答 4
Stack Overflow用户
发布于 2009-06-12 17:33:05
jQuery empty()在您的表上花费了很长时间，因为为了防止内存泄漏，它对空元素的内容做了大量的工作。如果您能够承受这种风险，您可以跳过所涉及的逻辑，只需完成这样的处理表内容的部分：
while ( table.firstChild )
table.removeChild( table.firstChild );或
table.children().remove();Stack Overflow用户
发布于 2009-06-12 17:23:37
最近，我有非常大的数据表，由于执行所有DOM操作，在进行更改时会占用15秒到一分钟的处理时间。在所有浏览器( IE除外)中，我将其降为<1秒(在IE8中需要5-10秒)。
我发现最大的速度增益是从DOM中删除我正在使用的父元素，执行对它的更改，然后将它重新插入到DOM中(在我的例子中是tbody)。
在这里，您可以看到两行相关的代码，它们极大地提高了性能(使用Mootools，但可以移植到jQuery)。
update_table : function(rows) {
var self = this;
this.body = this.body.dispose(); //<------REMOVED HERE
rows.each(function(row) {
var active = row.retrieve('active');
self.options.data_classes.each(function(hide, name) {
if (row.retrieve(name) == true && hide == true) {
active = false;
}
});
row.setStyle('display', (active ? '' : 'none'));
row.store('active', active);
row.inject(self.body); //<--------CHANGES TO TBODY DONE HERE
})
this.body.inject(this.table); //<-----RE-INSERTED HERE
this.rows = rows;
this.zebra();
this.cells = this._update_cells();
this.fireEvent('update');
},Stack Overflow用户
发布于 2009-06-12 17:21:36
您必须一次全部重新填充，还是可以在setTimeout()上用块进行重新填充？我意识到，这可能需要更长的时间，但它值得用户看到一些事情发生，而不是一个明显的锁。
https://stackoverflow.com/questions/987889
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号