Javascript性能改进

Question

我正在使用Jquery插件显示一个看起来像这样的下拉列表

现在在编辑页面中，此下拉列表带有选中的复选框，我将借助以下Javascript来完成此操作

var setValues = $("#SelectedFrameworks").val().split(",");
for (var i = 0; i < setValues.length; i++) {
    var selectedElement = $("#frameworksDropDown").find('*[data-id="' + setValues[i] + '"]');
    selectedElement.find("i").addClass("fa-check-square-o").removeClass("fa-square-o");

    SelectParent(selectedElement);           
}

function SelectParent(_element) {
    var count = 0;
    for (var i = 0; i < $(_element).parent().children().length; i++) {
        if ($(_element).parent().children().eq(i).find("i").attr("class") == "fa select-box fa-check-square-o") {
            count++;
        }
    }
    if (count == $(_element).parent().children().length) {
        $(_element).closest("ul").siblings("i").click();
    }
}

我先将此值存储在隐藏字段中，然后使用它来检查复选框。 （如代码中所示）

现在的问题是，数据很多时会花费太多时间。这会导致页面挂起。

我发现该操作

selectedElement.find("i").addClass("fa-check-square-o").removeClass("fa-square-o");

花费太多时间。如何优化此代码以获得更好的结果

编辑

这是此下拉菜单的HTML。

注意：该HTML是自动生成的。

谢谢。

Answer 1

因此，此代码的主要问题之一是调用DOM的次数。每次执行$(el)时，您都在调用document.getElementByClassName或id等。这会很慢，并且不需要进行那么多调用。

因此您可以更改

function SelectParent(_element) {
    var count = 0;
    for (var i = 0; i < $(_element).parent().children().length; i++) {
        if ($(_element).parent().children().eq(i).find("i").attr("class") == "fa select-box fa-check-square-o") {
            count++;
        }
    }
    if (count == $(_element).parent().children().length) {
        $(_element).closest("ul").siblings("i").click();
    }
}

为此，它一次访问DOM，存储对该元素的引用。这将减少您进行DOM调用的次数。当然，最大的优势是速度。我总是以$开头命名jquery变量，以便以后更容易，更快捷地知道该变量是什么，或者是否有人在您的代码上工作。

function SelectParent(_element) {
    var count = 0;
    var $element = $(_element);
    var $children =  $element.parent().children();

    for (var i = 0, length = $children.length; i < length; i++) {
        if ($children.eq(i).find("i").attr("class") == "fa select-box fa-check-square-o") {
            count++;
        }
    }
    if (count == $children.length) {
        $element.closest("ul").siblings("i").click();
    }
}

现在您当然可以重构其余部分以加快速度了；）