Question

让我首先道歉，因为没有给出代码片段。我正在研究的项目是专有的，我担心我无法完全 我正在做什么。但是，我会尽力描述。

以下是我的申请中发生的细分：

用户点击按钮

服务器以数据表格的形式检索图像列表

表中的每一行包含8个数据单元，每个数据单元又包含一个超链接

用户的每个请求最多可包含50行（如果需要，我可以更改此数字）

这意味着该表包含超过800个单独的DOM元素

我的分析显示，jQuery("#dataTable").empty()和jQuery("#dataTable).replaceWith(tableCloneObject)占用了整个处理时间的97％，平均需要4到6秒才能完成。

在寻找需要删除/替换的大量DOM元素时，我正在寻找一种加速上述jQuery函数的方法。我希望我的解释有所帮助。

Answer 1

jQuery empty()在你的桌面上花了很长时间，因为它为了防止内存泄漏而对清空元素的内容进行了大量的工作。如果你可以忍受这种风险，你可以跳过所涉及的逻辑，并且只做那些摆脱表内容的部分，如下所示：

    while ( table.firstChild )
        table.removeChild( table.firstChild );

或

    table.children().remove();

Answer 2

我最近有非常大的数据表，由于执行了所有DOM操作而在进行更改时会耗费15秒到一分钟的处理时间。我把它降到了所有浏览器中的<1秒但是IE（在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');
},

Answer 3

您是否必须立即重新填充所有内容，或者您可以通过setTimeout（）上的块进行重新填充？我意识到它可能需要花费更长的时间，但是对于用户来说看到发生的事情而不是明显的锁定是值得的。

Answer 4

对我有用的是$("#myTable").detach()。我必须清除一个有1000行的表。我试过了$("#myTable").children().remove()。这是$("myTable").empty()的改进，但仍然很慢。 $("#myTable").detach()需要1秒或更短时间。适用于FF和Chrome。 IE仍然很慢。

在处理大型DOM元素时加速jQuery empty（）或replaceWith（）函数

4 个答案: