首 页 | 精品电影 | 音乐天堂 | 在线游戏 | Flash MTV | 三湘书屋 | 幽默笑话 | 三湘图库 | 美女写真 | IT知识库 | QQ贴图 | 加入书签

网页制作网络编程图形图象操作系统冲浪宝典软件教学网络安全认证考试通信技术电子商务业内动态书籍教程原码

最近更新 文章分类 多媒体类 精品软件

本站搜索:
您的位置:三湘时空 -> IT知识库 -> 文章分类 -> Javascript教程 -> 提高代码性能技巧谈—以创建千行表格为例
提高代码性能技巧谈—以创建千行表格为例


文章类别:Javascript教程 来源: 作者: 发表日期:2005-12-9 字体:[ ]

小游戏 | 在线影院 | 幽默笑话 | 源码下载 | Flash MTV | 音乐试听 | 书屋 | 美女写真

2. 创建

6. 将

插入到TBODY

当它要比下面的方法慢一些:

1. 创建

2. 创建

插入到TBODY

5. 将

6. 将TextNode插入到

标签设置,没有标签时,每列的宽度均匀分布。因为不需要对每一列重新计算大小等,使用样式表实际上提高了性能,尤其当表格中的列数很多时。

增加样式表(CSS)的代码非常简单,如下:

tbl.style.tableLayout = "fixed";
View the sixth sample.

因为我们测试中的表格只有一列,这种改变只提高了页面1.6%的性能。如果有更多的列,性能增加会更多。

最后两次测试改变了将文字插入到表格中的方法。前面的测试中,我们都先创建一个TextNode ,然后将其插入到TD中。在Test7中, 取而代之,我们通过innerText 指定包含的文字。修改的代码是:

td.innerText = "Text";
View the seventh sample.

令人惊奇的是,这次修改产生的差异很大----比上次提高了9%的性能,比最初总共提高了36%的性能。时间从最初的2323ms到最后的1473ms。

现在,几乎人人都知道使用element.innerHTML 非常慢. 为了看看究竟它如何慢,我做了最后一次测试:使用 innerHTML替代innerText插入文字。这大大降低了性能。时间达到3375ms,比上次测试慢了80%,比基线测试慢了45%。显然,innerHTML是非常耗时的。

调整HTML页面性能类似于调整Win32应用程序性能;需要知道什么慢,什么快。希望这些方法能帮你提高页面性能。

微软的开发周期中很重要的一块是调整产品的性能。性能调整也是开发者应当留心的关键部分之一。 经过多年发展,业界对于如何优化Win32程序性能已经有非常多的了解。

现在开发者遇到的问题之一是不太清楚是什么导致DTHML和HTML页面运行快或者慢。当然,有一些很简单的方法——比如不要使用2MB大的图片。我们曾经使用过另外一些有趣的技巧提高了DHTML页面的性能,希望它们能帮助你改善自己的页面性能。

这里我使用了一个建立Table的程序例子。其中用document.createElement()和element.insertBefore()方法创建了1000行(Row)的表(Table)。每行有一列(Cell)。Cell中包含的内容称为"Text"。这段代码能有多糟呢?这么小的程序又能有多大调整余地呢?请看介绍。

一开始我写了一段自认为会很快的程序,我尽量避免一些低级问题----像没有显式定义变量、或者在一个页面中同时使用VBScript和Javascript。程序如下:






在PII233/64MB内存/NT4.0/IE5.0的机器上运行这段程序。页面从本机上装载。从开始装载页面到页面完全安静下来(所有的事件均已经运行,屏幕显示完成)的时间为2328毫秒,这也是本次测试的基线(我称之为Test1)。

这个页面中,一个很耗时的操作是频繁引用全局对象,如“document”、“body”、“window”等。引用所有这些类似的全局变量远比引用一个本地变量代价高昂。

因此我作了第一次改进尝试:缓存(Cache)document.body 到本地变量“theBody”中:

增加了如下代码:

var theBody = document.body;
然后修改这一行:

document.body.insertBefore(tbl, null);
将之改为:

theBody.insertBefore(tbl, null);
View the second sample.

这次修改并没有太大影响到整体时间,它只缩短了3 ms。但它已经表明,如果在循环中也有document.body对象而对其引用做出修改,带来的好处将是可观的。

随后,我缓存了document对象----在我们这个测试中,document对象共被引用了3002次。修改后代码如下:






View the third sample.

此次运行时间只有2100ms,节约了大约10%的时间。使用本地变量而不是直接引用document对象平均每次节约了0.4毫秒。

一个常用的优化性能的方法是:当脚本不需要立即运行时,在


View the fourth sample.

这次测试的时间为2043 ms。相对基线测试提高了12%,比上次测试提高了2.5%。

下面我们谈到的一个改进方法非常有用,当然也稍微麻烦一点。当需要创建元素然后将其插入树状的结构中时,将其直接插入到主干中效率更高----而不是首先将其插入大的子树,然后再将大的子树插入主干。例如,如果你创建一个每行有一列、列中有一些文字的表,你可以这样做:

1. 创建

3. 创建TextNode节点

4. 将TextNode 插入

5. 将

插入到

3. 创建TextNode

4. 将

插入到

上面的四次测试使用的都是前一种方法。我们用后一种方法进行第5次测试。代码如下:






View the fifth sample.

Test5只需1649ms。这比上次测试提高了25%,比基线快了几乎30%。

随后的修改是使用了预制的样式表。使用了预制样式表的表格列宽或者是通过

上一篇:限制图片上传长宽的JavaScript代码 下一篇:用JavaScript绘图—JS2D函数集
本栏目热门文章
·javascript+xml实现二级下拉菜单,不会被任何标签或元素遮 2005-10-4
·JavaScript Web页面内容导出到Word、Excel 2005-11-7
·用javascript连接access数据库的方法 2005-10-4
·JAVASCRIPT加密解密终级指南 2005-10-4
·TreeView节点互斥,autopostback=false的方法 2005-10-4
·网页对联广告代码效果大全 2005-11-7
·网页javascript精华代码集 2006-1-6
·Javascript的IE和Firefox兼容性汇编 2005-10-4
·利用JS获取IE客户端IP及MAC的实现 2006-1-10
·javascript应用:实现复选框全选/全不选切换 2006-1-6
新近更新文章
·网页特效:图片随机显示技巧 2006-6-15
·一个非常漂亮的脚本日历 2006-6-15
·用javascript实现(页面正在加载的效果) 2006-6-15
·调试javascript的好方法 2006-6-9
·js代码小记(判断textbox的长度,并且固定最多收入字符) 2006-6-9
·更正用AJAX实现IE TREE无刷新取值的方法 2006-6-4
·修改后的prototype.js,增加进度条和验证输入框 2006-5-28
·用js写的一个跑马灯 2006-5-28
·JS代码的格式化和压缩 2006-5-28
·突破IE屏蔽限制,自己的网站使劲弹新IE窗口 2006-5-22
首 页 | 软件发布 | 广告联系 | 下载帮助 | 意见反馈 | 网站地图
  CopyRight? 2002-2004 WWW.SXSKY.NET? All Rights Reserved
三湘时空 站长QQ:82675303 Email: