Question

我在循环中有以下jQuery语句。 #MainContent_gvDemographic和#tblFreez是页面中的两个表。

$("#MainContent_gvDemographic").find(str)
                               .css("height", $("#tblFreez")
                               .find(str)
                               .css("height"))

当循环中有许多步骤时，需要很长时间才能完成。为了解决这个问题，我然后使用两个循环，一个用于读取$（“＃tblFreez”）的高度。找到（str），另一个用于将高度写入$("#MainContent_gvDemographic").find(str)，并使用数组来执行两个循环之间的高度数据。现在变得快得多。有谁知道为什么这两种解决方案在性能上有如此大的差异？计算复杂度对我来说是一样的。

好的，这是两个完整版本。原文：

function FixHeight() {
 var rowCount = $('#tblFreez tr').length;

    for (var i = 0; i < rowCount; i++) {
            var str = "";

            if ($.browser.msie) {
                str = "tr:eq(" + i + ") td";
            }
            else {
                str = "tr:eq(" + i + ")";
            }        
           $("#MainContent_gvDemographic").find(str).css("height", $("#tblFreez").find(str).css("height"));               
        }

}

新：

function FixHeight() {
        var rowCount = $('#tblFreez tr').length;
        var hei = new Array();
        for (var i = 0; i < rowCount; i++) {
            var str = "";
            if ($.browser.msie) {
                str = "tr:eq(" + i + ") td";
            }
            else {
                str = "tr:eq(" + i + ")";
            }
            hei[i] = $("#tblFreez").find(str).css("height");
        }
        for (var i = 0; i < rowCount; i++) {
            var str = "";

            if ($.browser.msie) {
                str = "tr:eq(" + i + ") td";
            }
            else {
                str = "tr:eq(" + i + ")";
            }

            $("#MainContent_gvDemographic").find(str).css("height", hei[i]);
        }

}

Answer 1

为什么不只使用一个循环而不是for而是jQuery .each()。我没有测试下面的代码，但应该可以工作。

function FixHeight() {
    var $MainContent = $("#MainContent_gvDemographic");
    var $tblFreezRows = $("#tblFreez tr");

    var hei, $row;
    $tblFreezRows.each(function(index, elem){
        $row = $(this);

        if ($.browser.msie) {
            hei = $row.find('td').css("height");
            $MainContent.find("tr:eq(" + index + ") td").css("height", hei);
        }
        else {
            hei = $row.css("height");
            $MainContent.find("tr:eq(" + index + ")").css("height", hei);
        }
    });
}

Answer 2

DOM操作通常是昂贵的操作。

您的第一个版本具有繁重的DOM操作，但您的第二个版本具有计数。它看起来像负载与数量。

理想情况下，您的第一个版本应该更快，因为它只是一个循环而且迭代次数是第二个版本的一半..但情况并非总是如此。

假设您的内存类似于1000M，其中300M可以被垃圾收集，这意味着它可以被清理。因此，只要内存接近1000M，操作系统内存模型就会调用垃圾收集器。考虑到这些条件，让我们说在你的第一个版本中，每5次迭代需要1000M，最终会调用垃圾收集器来清理或释放下一次迭代的资源。因此，如果最终运行100次迭代，则等于100次迭代+ 20次GC处理。

在你的第二种情况下，假设它需要50次迭代才能填满1000M，所以你最终会调用4次GC处理，基本上是20次而不是4次调用你们每次迭代之间的其他进程。

上面只是一个推测，实际的内存模块比我解释的要聪明得多，但这只是为了给出负载与数字的概念。

无论如何..尝试下面的代码，看看它是否解决了你的问题，

设置TR级别的高度

var fTable = document.getElementById('#tblFreez');
$("#MainContent_gvDemographic tr").each(function(ridx) {          
      $(this).height($(fTable.rows[ridx]).height());
});

在TD级别设置高度

var fTable = document.getElementById('#tblFreez');
$("#MainContent_gvDemographic tr").each(function(ridx) {
      $(this).find('td').each(function (cidx) {
          $(this).height($(fTable.rows[ridx].cols[cidx]).height());
     });
});

Answer 3

尝试在更改/搜索元素之前分离元素。然后重新附加它们。 DOM操作成本很高。

在一个循环中读写JQuery语句

3 个答案: