提高 jquery 选择速度

Question

我有这段代码可以操作 asp.net treeview html 代码。

此代码经常运行，因此尽可能快地运行很重要。

我想了解更多关于 jquery 选择器和提高其速度的信息。到目前为止，我能够自己获取此代码。

有些事情我不确定是如果你想要第三个子元素，我应该使用[2] 或.eq(2) 还是:nth-child(2)？另外，如果我使用$ 从一组选定的东西中选择一些东西，这是必要的，还是已经选择了？

有人知道我可以做些什么来提高我的 jquery 选择效率吗？

谢谢。

function showResultsOnTreeview(treeviewID, filenameDictionary) {
    var sectionNodes = $("#" + treeviewID + " > table");
    var numOfSections = sectionNodes.length;
    var i, j, sectionName, divContainer, itemNodes, numOfItems, itemName, itemTag, itemPath;

    for (i = 0; i < numOfSections; i += 1) {
        sectionName = $(sectionNodes[i]).text();
        divContainer = $(sectionNodes[i]).next('div');
        divContainer.hide();
        itemNodes = $('table', divContainer);
        numOfItems = itemNodes.length;
        for (j = 0; j < numOfItems; j += 1) {
            itemTag = $('td', $(itemNodes[j])).eq(2);
            itemTag.removeClass('treeViewResult');
            itemName = getNameFromItem($(itemNodes[j]).text());
            itemPath = filenameDictionary[itemName];
            if (itemPath != null) {
                if (itemPath.indexOf(sectionName + "/" + itemName) != -1) {
                    itemTag.addClass('treeViewResult');
                    divContainer.show();
                }
            }
        }
    }
}

Answer 1

您可以进行一些优化。第一个肯定是使用.eq() 而不是[]。就像这里一样，你正在创建一个 jQuery 对象：

var sectionNodes = $("#" + treeviewID + " > table");

但后来，你这样做：

sectionName = $(sectionNodes[i]).text();
divContainer = $(sectionNodes[i]).next('div');

在这里，您正在创建另外 2 个不需要的 jquery 对象，您可以这样做：

sectionName = sectionNodes.eq(i).text();
divContainer = sectionName.next('div');

那么，我不知道您是否有其他方法可以做到这一点，但是如果您可以删除“循环中的循环”，那就太好了。

之后，不要使用上下文选择器 ($('selector', $element))，而是使用 find。上下文使用 find 所以它会减少函数调用的数量。以这一行为例：

 $('td', $(itemNodes[j])).eq(2)

当您可以在没有额外对象的情况下执行相同操作并且可以使用 .find() 时，您正在创建 2 个 jQuery 对象：

itemTag = itemNodes.eq(j).find('td').eq(2);

基本上，使用.find() 代替上下文并避免创建不需要的jQuery 对象。希望这会有所帮助。