在一个循环中读写JQuery语句

Question

我在循环中有以下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]);
        }

}

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操作，但第二个版本有计数。它看起来像是负载vs数量。

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

假设您的内存是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操作成本很高。