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

fins

浏览: 2607561 次
性别:
来自: 小胖儿的大城

最近访客更多访客>>

快了的男孩

sagadan

fancycat

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

IE C C++C#工作

今天无意间发现, 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>

ntable.zip (1 KB)
下载次数: 20

分享到：

[原创 2007-9-28 ]GT Grid (原ECSide) 最 ... | GT-Grid(原ECSide) 速度测试中完胜 EXT-Gri ...

2007-09-25 17:06
浏览 3569
评论(5)
论坛回复 / 浏览 (5 / 5347)
分类:Web前端
查看更多

5 楼 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>

4 楼 goncha 2007-09-26

的确如此，没有alert之后是不快

3 楼 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会暂停

这个很重要啊呵呵谢谢二位

2 楼 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));
}

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

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论