javascript - 什么更快 - $().closest() 还是原生 while 循环？

Question

我有自己的下拉列表实现。我将所有列表标识符存储在全局数组中，并且在 window 单击事件中，我迭代该数组并决定必须隐藏哪个列表。

我需要检查元素是否具有 .active 类的祖先。

jQuery 版本:

    for (var i = 0; i < window.dropdowns.length; i++) {
        var e = window.dropdowns[i];
        if ($(event.target).closest('.active').length == 0) {
            e.hideList();
        }
    }

纯 JavaScript 版本:

for (var i = 0; i < window.dropdowns.length; i++) {
    var e = window.dropdowns[i];
    var parent = event.target.parentElement;
    while (parent.tagName != 'BODY') {
        if (parent.className.indexOf('active') > 0) {
            e.hideList();
            break;
        }

        parent = parent.parentElement;
    }
}

那么，哪个版本会更快？性能如何取决于页面上的元素数量？

Answer 1

如果您只是想知道什么最快，write a simple test找出答案。如果你想知道为什么......

jQuery 将会做比您需要的更多的工作，例如，您只测试 tagName 和 className。

话虽如此，您的代码可能会给您带来误报，因为如果元素具有 notactive 类，则 className.indexOf('active') 将返回 > -1。请改用 classList。

最后，如果您已经在使用 jQuery，那么您应该使用它，因为我们刚刚向您展示了我们自己编写的代码可能存在错误，并且在这种情况下性能不太重要。

请记住，过早优化是许多意大利面条式代码的根源。