2007-09-25

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

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

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

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


<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 onload="init();">
<div id="scr" class="gt-body"> 

</div>
</body>
</html>
评论
fins 2007-09-26
我做下总结吧:


当创建完大的table时, 不要急着用js对table的属性或内部进行操作.
这时候可以试着做一些与这个table无关的工作
然后再回头来继续做和这个table相关的工作

因为table的渲染与"这个table无关的工作"是可以并行的
但是table的渲染与"和这个table相关的工作"是串行的.

也就是说 如果
刚创建完 table 就操作table,js总体的运行时间会提高(浪费了异步渲染这一优势)

下面是改造后的js 
<script language="JavaScript">

var t0,t1,t2,t3;

function init(){

var divC=document.getElementById("scr");
t0=new Date().getTime();
	var tableHTML=["<table id=\"testTable1\" class=\"gt-table\" cellSpacing=\"0\"  cellPadding=\"0\" border=\"0\" ><tbody>"];
	for (var r=0;r<2000; 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 tableC=document.getElementById("testTable1");

t1=new Date().getTime();

/* 用下面的语句模拟: 做了一些与这个table无关的工作 ,耗时2秒 ,然后执行与这个table相关的工作 */
window.setTimeout(getScrollHeight,2000);

}

function getScrollHeight(){
 divC=document.getElementById("scr");  // key point is here   
t2=new Date().getTime();
var w2=divC.scrollHeight;
t3=new Date().getTime();
alert( "创建table耗时 :"+(t1-t0)+ " \n " + "取得xWidth/Height 耗时 :"+(t3-t2));

}
</script>
goncha 2007-09-26
的确如此，没有alert之后是不快
fins 2007-09-26
谢谢楼上二位:

to Readonly:
创建表格和取得 宽高是一个完整的事物 中间不能用alert中断.
你的代码 
function init(){   
    //...   
    alert( "创建table耗时 :"+(t1-t0));   
    getScrollHeight();   
}

中 把alert去掉依然不行 还是很慢 :'(


to goncha
把alert()去掉 一样慢. :'(



实际上楼上两位的做法 是 把 "表格生成 表格渲染 取得表格高度"这三个操作的总耗时
变成了 "表格生成 表格渲染(这时候是用alert将页面的js运行悬挂起来,而这时浏览器还在偷偷的渲染表格,但是这时候js不继续运行,所以计时就不准确了) 取得表格高度"


但是楼上二位消除了我的一个误解.

我一直以为
divC.innerHTML=tableHTML.join('\n');

这时候 会渲染表格 不渲染完js不会继续运行

而实际情况是 js会继续运行
但是 遇到 需要等表格渲染完才能正确执行的语句时 如取得scrollHeight, js会暂停

这个很重要啊 呵呵 谢谢二位
goncha 2007-09-25 

function init() {
  var divC=document.getElementById("scr");
  var t0=new Date().getTime();
  ...
  divC.innerHTML=tableHTML.join('\n');
  var t1=new Date().getTime();
  alert("Table Cost:" + (t1 - t0));

  divC=document.getElementById("scr");  // key point is here
  t0=new Date().getTime();
  var w=divC.scrollHeight;
  t1=new Date().getTime();
  alert("GetScrollHeight Cost:"+(t1-t0));
}
Readonly 2007-09-25
你这样的计时代码是不正确的，你应该把计时getScrollHeight的代码移到另外一段代码里面，让它在表格渲染完毕以后再进行调用： 
function getScrollHeight() {
    var divC=document.getElementById("scr");
    var t1=new Date().getTime();
    var w=divC.scrollHeight;
    var t2=new Date().getTime();
    alert("取得xWidth/Height 耗时 :"+(t2-t1));
}


调整最后2行代码，让代码在alert之前和之后执行就发现区别了 
function init(){
    //...
    alert( "创建table耗时 :"+(t1-t0));
    getScrollHeight();
}
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

fins
  • 浏览: 743379 次
  • 性别: Icon_minigender_1
  • 来自: 小胖儿的大城
  • 详细资料
搜索本博客
我的相册
89757367-bcf7-3449-ae1d-31a5a2021dd7-thumb
customHead
共 76 张
其他分类
存档
最新评论