|
提高代码性能技巧谈—以创建千行表格为例
微软的开发周期中很重要的一块是调整产品的性能。性能调整也是开发者应当留心的关键部分之一。 经过多年发展,业界对于如何优化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毫秒。
一个常用的优化性能的方法是:当脚本不需要立即运行时,在 |