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

Question

让我先为没有给出代码片段而道歉.我正在研究的项目是专有的,我担心我无法准确展示我正在做什么.但是,我会尽力描述.

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

1. 用户单击一个按钮
2. 服务器以数据表的形式检索图像列表
3. 表中的每一行包含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();