时间戳

首页 > 解决方案 > Javascript 性能提升

javascript - Javascript 性能提升

问题描述

我正在使用 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 是自动生成的。

谢谢。

标签： javascriptjquery

解决方案

因此，这段代码的一大问题是调用 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();
    }
}

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

推荐阅读