3

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

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

当循环中有很多步骤时，需要很长时间才能完成。为了解决这个问题，我使用了两个循环，一个用于读取 $("#tblFreez").find(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]);
        }

}

4

3 回答 3

1

为什么不只使用一个循环而不是forjQuery .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);
        }
    });
}
于 2013-03-06T21:06:08.807 回答
0

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());
     });
});
于 2013-03-06T21:02:38.657 回答
0

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

于 2013-03-06T21:04:12.963 回答