提高Javascript性能的技巧

Question

我有一个需求，需要根据另一个大约有500行的table.The表中的相应行来设置表中每行的高度。我已经写了下面的Javascript，但在8000ms左右性能真的很差。我怎样才能让这件事变得更快，感谢任何提示。

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