Javascript 在一个循环中读取和写入JQuery语句

我在循环中有以下jQuery语句

#main content_

和

#tblFreez

是一个页面中的两个表格

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

当循环中有许多步骤时，需要很长时间才能完成。为了解决这个问题，我使用了两个循环，一个用于读取$（“#tblFreez”）.find（str），另一个用于将高度写入

$（“#MainContent_”）.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"));               
        }

函数FixHeight（）{
var rowCount=$（'#tblFreez tr'）。长度；
对于（变量i=0；i

}

新的：

函数FixHeight（）{
var rowCount=$（'#tblFreez tr'）。长度；
var hei=新数组（）；
对于（变量i=0；i

---

}

DOM操作通常是昂贵的操作

第一个版本有大量的DOM操作，但第二个版本有计数。它看起来像是负载vs数量

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

假设你的内存是1000米，其中300米可以被垃圾收集，这意味着它可以被清理。因此，只要内存接近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());
});

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());
     });
});

TD级别的设置高度

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

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());
     });
});

---

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

为什么不只使用一个循环，而不使用

进行
，而是使用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);
        }
    });
}

如果您显示每个版本的代码，回答起来会容易得多。为什么要将该语句放在循环中？它应该在循环之后。你在迭代什么？发布完整的代码，以便我们验证并建议是否有更好的方法。您应该从在循环之外定义jquery元素开始，首先我看到的是$（“#tblFreez”）。在DOM中搜索元素是一项昂贵的操作。您可能需要加粗文本。有人知道为什么这两种解决方案在性能上有如此大的差异吗因为很多人似乎忽视了这一点。一个有趣的推测。我推测，这种差异可能更普遍地是“优化”。如果使用不同javascript执行引擎的不同浏览器会提供不同的结果，我也不会感到惊讶。例如，某些配置甚至可能更快地通过原始实现？例如，任何愿意参与的人都可以浏览开源V8 JS引擎的代码（假设它展示了这个问题）——PS——我不是自愿这么做的。