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

Question

首先让我为没有提供代码 sn-p 道歉。我正在从事的项目是专有的，恐怕我无法准确地展示我正在从事的工作。不过，我会尽量做到描述性。

以下是我的应用程序中发生的情况的细分：

1. 用户点击按钮
2. 服务器以数据表的形式检索图像列表
3. 表格中的每一行包含 8 个数据单元格，每个单元格又包含一个超链接
   • 用户的每个请求最多可以包含 50 行（如果需要，我可以更改此数字）
   • 这意味着该表包含超过 800 个单独的 DOM 元素
   • 我的分析表明，jQuery("#dataTable").empty() 和 jQuery("#dataTable).replaceWith(tableCloneObject) 占用了我总处理时间的 97%，平均需要 4 到 6 秒才能完成。

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

Answer 1

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

Answer 2

jQuery empty() 在您的表上花费了很长时间，因为它对清空元素的内容进行了大量的工作，以防止内存泄漏。如果您可以承受这种风险，则可以跳过所涉及的逻辑，只需执行删除表格内容的部分，如下所示：

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

或

    table.children().remove();

Answer 3

我最近有非常大的数据表，由于正在执行所有 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');
},