性能比较：jQuery的remove()和JavaScript的removeChild()

Question

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

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

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

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

需要约300毫秒，会产生明显的延迟。

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

需要大约30毫秒。

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

演示：jspref

- Kong

---

在阅读了@dystroy的见解之后，我开始寻找一个jQuery源代码工具。这里有一个很棒的源代码查看器：http://james.padolsey.com/jquery/ - Kong

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;
}

- Denys Séguret

---

为什么只有部分答案？ - Bergi

@Bergi 我已经编辑过了。jQuery 操作总是会有一些开销，但这并不是很有趣，所以我简化了措辞。 - Denys Séguret

谢谢！那清楚地解释了时间差。我想知道是否可以绕过cleanData()？我没有针对该元素的任何jQuery事件。 - Kong

@Kong 如果是这样的话，那应该是安全的。但如果你没有看到任何用户能够注意到的性能问题，我建议保留它，因为你的应用程序的其余部分可以更少地产生内存泄漏的风险而得以发展。 - Denys Séguret