当前位置 : 主页 > 网络安全 > 测试自动化 >

性能:jQuery remove()vs JavaScript removeChild()

来源:互联网 收集:自由互联 发布时间:2021-06-22
我有一个包含大约1,500行的表. 我正在使用以下jQuery代码从DOM中删除表: $('#myTable').remove(); 这需要大约300毫秒,造成一个相当明显的滞后. 使用removeChild()执行相同的操作: var myTable = $('
我有一个包含大约1,500行的表.

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

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

这需要大约300毫秒,造成一个相当明显的滞后.

使用removeChild()执行相同的操作:

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

大约需要30ms.

我可以很容易地使用removeChild()版本,但我很困惑为什么jQuery的remove()需要更长的时间? removeChild()版本是不是清除了jQuery的东西?

演示:jspref

从 the documentation开始:

In addition to the elements themselves, all bound events and jQuery
data associated with the elements are removed.

这意味着 :

>这个函数做了一些额外的工作(主要是为自己和孩子调用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;
}
网友评论