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。

话虽如此，您的代码可能会给您误报，因为className.indexOf('active')将返回＆gt;如果元素具有非活动类，则返回-1。改为使用classList。

最后，如果你已经在使用jQuery，你应该使用它，因为我们只是告诉你我们自己编写的代码可能有问题，在这种情况下性能不太重要。

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

Answer 2

如果您有兴趣了解硬数字，可以将循环转换为函数，并在其上使用console.time和console.timeEnd。像这样：

//First while loop
console.time(firstWhileLoopInFunction)
console.timeEnd(firstWhileLoopInFunction)

//Second while loop
console.time(secondWhileLoopInFunction)
console.timeEnd(secondWhileLoopInFunction)

什么是更快 - $（）。nearest（）或本地while循环？

2 个答案: