求助,IE和FF在取得页面元素的client/offset/scroll+width/height 时为何如此耗时-优快云博客

今天无意间发现, IE和FF在取得页面元素的 client/offset/scroll + width/height 时,居然相当耗时.
大家可以下载我附件里的文件试一试.

文件代码如下, 大家注意看一下我里面的那段注释.

希望有朋友可以帮我解决这个疑问, 如果能提出优化方案更是感激不尽.

[code]

<html>
<head>
<style type="text/css">
.gt-body { overflow: auto; width:500px; height:300px; }

.gt-table { table-layout:fixed; }

.gt-row { cursor: default; background-color:#ffffff; }

.gt-row-even { cursor: default; background-color:#f3f6f5; }

.gt-row td { width:110px; line-height:16px; padding: 2px 2px 2px 2px; font-size:12px; }

.gt-row div { white-space:nowrap; }

</style>

<script language="JavaScript">

function init(){

var divC=document.getElementById("scr");
var t0=new Date().getTime();
var tableHTML=["<table id=\"testTable1\" class=\"gt-table\" cellSpacing=\"0\" cellPadding=\"0\" border=\"0\" ><tbody>"];
for (var r=0;r<3000; r++){
tableHTML.push("<tr class=\"gt-row "+ (r%2==0?"":"gt-row-even")+ "\">");
for (var c=0;c<10;c++){
tableHTML.push("<td><div class=\"\" >"+r+","+c+"__testdata</div></td>");
}
tableHTML.push("</tr>");
}
tableHTML.push("</tbody></table>");

divC.innerHTML=tableHTML.join('\n');

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

/*
在下面那行里不管是取 client/offset/scroll + width/height 哪种,耗时都很惊人 :( .
我上面生成table的代码实际上应该比较耗时的,双重循环,拼接字符串数组.
但是下面那句简单的语句耗时竟然达到生成table耗时的 1/3---1/2 !!!!!
为什么呢 ??????????/ 谁来帮忙解答一下吧谢谢了 :(
*/
var w=divC.scrollHeight;

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

alert( "创建table耗时 :"+(t1-t0)+ " \n " + "取得xWidth/Height 耗时 :"+(t2-t1));

}
</script>

</head>
<body οnlοad="init();">
<div id="scr" class="gt-body">

</div>
</body>
</html>

[/code]