加速jQuery empty（）或replaceWith（）处理大型DOM元素时的功能 [英] Speeding up jQuery empty() or replaceWith() Functions When Dealing with Large DOM Elements

问题描述

让我开始不要给代码片段道歉。我正在开展的项目是专有的，我恐怕不能正确地显示我正在工作的。不过，我会尽力描述。

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

1. 用户单击按钮


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


3. 表中的每一行包含8个数据单元，每个数据单元又包含一个超链接
   
   
   
   
   • 用户的每个请求最多可包含50行（我可以更改这个数字，如果需要）
   
   
   • 这意味着该表包含800多个单独的DOM元素
   
   
   • 我的分析显示， jQuery （#dataTable）。empty（）和 jQuery（＃dataTable）.replaceWith（tableCloneObject）占整体处理的97％时间，平均需要4 - 6秒才能完成。
   
   

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

解决方案

jQuery empty（）需要很长时间因为它为了防止内存泄漏而对清空元素的内容做出了非常巨大的工作量。如果你可以忍受这样的风险，你可以跳过所涉及到的逻辑，只做一些摆脱表格内容的部分，如下所示：

  while（table.firstChild）
 table.removeChild（table.firstChild）; 
  

或

  table.children（）。remove（）; 
  

Let me start off by apologizing for not giving a code snippet. The project I'm working on is proprietary and I'm afraid I can't show exactly what I'm working on. However, I'll do my best to be descriptive.

Here's a breakdown of what goes on in my application:

1. User clicks a button
2. Server retrieves a list of images in the form of a data-table
3. Each row in the table contains 8 data-cells that in turn each contain one hyperlink
   • Each request by the user can contain up to 50 rows (I can change this number if need be)
   • That means the table contains upwards of 800 individual DOM elements
   • My analysis shows that jQuery("#dataTable").empty() and jQuery("#dataTable).replaceWith(tableCloneObject) take up 97% of my overall processing time and take on average 4 - 6 seconds to complete.

I'm looking for a way to speed up either of the above mentioned jQuery functions when dealing with massive DOM elements that need to be removed / replaced. I hope my explanation helps.

解决方案

jQuery empty() is taking a long time on your table because it does a truly monumental amount of work with the contents of the emptied element in the interest of preventing memory leaks. If you can live with that risk, you can skip the logic involved and just do the part that gets rid of the table contents like so:

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

or

    table.children().remove();

这篇关于加速jQuery empty（）或replaceWith（）处理大型DOM元素时的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！