Question

我有一个要求，我需要根据另一个表中的相应行设置表的每一行的高度。该表有大约500行。我写了下面的Javascript，但性能在8000毫秒左右很糟糕。我怎样才能更快地做到这一点，欣赏任何提示。

 var start = new Date().getTime();


 var rows = document.getElementById("table1").rows;
 var dup_rows = document.getElementById("table2").rows;
 var num_rows = rows.length;
 var num_dup = dup_rows.length;
 for (var i = 0; i < num_rows; ++i) {
var hg = rows[i].offsetHeight;
    rows[i].style.height = hg +'px';
dup_rows[i].style.height = hg +'px';
   }

var end = new Date().getTime();
var time = end - start;
alert('Execution time: ' + time);

根据建议编辑DOM之外的表，我尝试了下面的内容，但是当从DOM中删除表时，outerHeight / offsetHeight返回0。

      clone_small = $('#table2').clone();
      clone_main_tab = $('#table1').clone();
 $("#table2").remove();
 $("#table1").remove();

 $(clone_main_tab).find("tr").each(function(i) {
 var hg = 0;
 hg = $(this).offsetHeight;  // If I hard code the height it works
  // alert(hg);
 $(this).height(hg);
 clone_small.find("tr").eq(i).height(hg);


 });

如何在DOM之外设置这些行的高度？

Answer 1

从DOM中删除要修改的元素，然后在完成修改后重新插入它们。这可以防止浏览器在每次更改时都必须重排文档，只有在完成所有操作时才执行一次。

Answer 2

dup_rows[i].style.height = rows[i].style.height不是更好吗？

Answer 3

通过使用以下代码，我终于能够在性能方面取得一些进步

 $clone_table1 = $('#table1').clone();
 $clone_table2 = $('#table2').clone();

 $('#table2').remove();
 $trow2 = $('#table1').find('tr');
 $trow = $clone_table1.find('tr');
 $trow3 = $clone_table2.find('tr');

 $trow.each(function(i) {
 var hg = 0;
 hg = $trow2.eq(i).outerHeight();
 $(this).height(hg);
 $trow3.eq(i).height(hg);
 });


$parent2.append($clone_table2);
$('#table1').remove();
$parent1.append($clone_table1);

提高Javascript性能的提示

3 个答案: