浏览 1720 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
时间：2007-09-25
今天无意间发现, 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 哪种,耗时都很惊人
声明：JavaEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
|
| 返回顶楼 | |
|
时间：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();
}
|
| 返回顶楼 | |
|
时间：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));
}
|
| 返回顶楼 | |
|
时间：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会暂停 这个很重要啊 呵呵 谢谢二位 |
| 返回顶楼 | |
|
时间：2007-09-26
的确如此，没有alert之后是不快
|
| 返回顶楼 | |
|
时间：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>
|
| 返回顶楼 | |
.
我上面生成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>
