javascript - 性能：jQuery remove() 与 JavaScript removeChild()

Question

我有一个包含大约 1,500 行的表。

我正在使用以下 jQuery 代码从 DOM 中删除表：

$('#myTable').remove();

这大约需要 300 毫秒，产生了非常明显的延迟。

用 removeChild() 做同样的事情：

var myTable = $('#myTable')[0] ;
myTable.parentNode.removeChild(myTable);

大约需要 30 毫秒。

我可以轻松使用 removeChild() 版本，但我很困惑为什么 jQuery 的 remove() 会花费这么长时间？removeChild() 版本是否没有清除 jQuery 的内容？

演示：jspref

Answer 1

从文档中：

除了元素本身，所有与元素关联的绑定事件和 jQuery 数据都将被删除。

这表示 ：

• 这个函数做了一些额外的工作（主要是调用cleanData它自己和孩子）
• 您通常应该使用它来避免内存泄漏

这清楚地出现在源代码中：

remove: function( selector, keepData ) {
    var elem,
        i = 0;

    for ( ; (elem = this[i]) != null; i++ ) {
        if ( !selector || jQuery.filter( selector, [ elem ] ).length > 0 ) {
            if ( !keepData && elem.nodeType === 1 ) {
                jQuery.cleanData( getAll( elem ) );
            }

            if ( elem.parentNode ) {
                if ( keepData && jQuery.contains( elem.ownerDocument, elem ) ) {
                    setGlobalEval( getAll( elem, "script" ) );
                }
                elem.parentNode.removeChild( elem );
            }
        }
    }

    return this;
}