所有  育婴常识  文学故事  建站教程  幽默笑话  菜谱 
这篇不太合适?↑↑重新搜索一下看看。↑↑
[Javascript]提高代码性能技巧谈—以创建千行表格为例

Root In:http://www.knowsk...com/302990.html    Add Time:2006-2-19 11:57:06    Click Count:3290


文章来自:http://www.pyzy.net微软的开发周期中很重要的一块是调整产品的性能。性能调整也是开发者应当留心的关键部分之一。 经过多年发展,业界对于如何优化Win32程序性能已经有非常多的了解。
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net现在开发者遇到的问题之一是不太清楚是什么导致DTHML和HTML页面运行快或者慢。当然,有一些很简单的方法——比如不要使用2MB大的图片。我们曾经使用过另外一些有趣的技巧提高了DHTML页面的性能,希望它们能帮助你改善自己的页面性能。
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net这里我使用了一个建立Table的程序例子。其中用documentcolor=red>.createElement()和element.insertBefore()方法创建了1000行(Rcolor=red>ow)的表(Table)。每行有一列(Cell)。Cell中包含的内容称为"Text"。这段代码能有多糟呢?这么小的程序又能有多大调整余地呢?请看介绍。
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net一开始我写了一段自认为会很快的程序,我尽量避免一些低级问题----像没有显式定义变量、或者在一个页面中同时使用VBScript和Javascript。程序如下:
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net<html>
文章来自:http://www.pyzy.net<body>
文章来自:http://www.pyzy.net<script>
文章来自:http://www.pyzy.netvar tbl, tbody, tr, td, text, i, max;
文章来自:http://www.pyzy.netmax = 1000;
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.nettbl = documentcolor=red>.createElement("TABLE");
文章来自:http://www.pyzy.nettbl.border = "1";
文章来自:http://www.pyzy.nettbody = documentcolor=red>.createElement("TBODY");
文章来自:http://www.pyzy.nettbl.insertBefore(tbody, null);
文章来自:http://www.pyzy.netdocument.bodcolor=red>y.insertBefore(tbl, null);
文章来自:http://www.pyzy.netfor (i=0; i<max; i++) {
文章来自:http://www.pyzy.nettr = documentcolor=red>.createElement("TR");
文章来自:http://www.pyzy.nettd = documentcolor=red>.createElement("TD");
文章来自:http://www.pyzy.nettext = documentcolor=red>.createTextNode("Text");
文章来自:http://www.pyzy.nettd.insertBefore(text, null);
文章来自:http://www.pyzy.nettr.insertBefore(td, null);
文章来自:http://www.pyzy.nettbodcolor=red>y.insertBefore(tr, null);
文章来自:http://www.pyzy.net}
文章来自:http://www.pyzy.net</script>
文章来自:http://www.pyzy.net</body>
文章来自:http://www.pyzy.net</html>
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net在PII233/64MB内存/NT4.0/IE5.0的机器上运行这段程序。页面从本机上装载。从开始装载页面到页面完全安静下来(所有的事件均已经运行,屏幕显示完成)的时间为2328毫秒,这也是本次测试的基线(我称之为Test1)。
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net这个页面中,一个很耗时的操作是频繁引用全局对象,如“document”、“body”、“windcolor=red>ow”等。引用所有这些类似的全局变量远比引用一个本地变量代价高昂。
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net因此我作了第一次改进尝试:缓存(Cache)document.body 到本地变量“theBody”中:
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net增加了如下代码:
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.netvar theBody = document.body;
文章来自:http://www.pyzy.net然后修改这一行:
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.netdocument.bodcolor=red>y.insertBefore(tbl, null);
文章来自:http://www.pyzy.net将之改为:
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.nettheBodcolor=red>y.insertBefore(tbl, null);
文章来自:http://www.pyzy.netView the second sample.
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net这次修改并没有太大影响到整体时间,它只缩短了3 ms。但它已经表明,如果在循环中也有document.body对象而对其引用做出修改,带来的好处将是可观的。
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net随后,我缓存了document对象----在我们这个测试中,document对象共被引用了3002次。修改后代码如下:
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net<html>
文章来自:http://www.pyzy.net<body>
文章来自:http://www.pyzy.net<script>
文章来自:http://www.pyzy.netvar tbl, tbody, tr, td, text, i, max;
文章来自:http://www.pyzy.netmax = 1000;
文章来自:http://www.pyzy.netvar theDoc = document;
文章来自:http://www.pyzy.netvar theBody = theDoc.body;
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.nettbl = theDoccolor=red>.createElement("TABLE");
文章来自:http://www.pyzy.nettbl.border = "1";
文章来自:http://www.pyzy.nettbody = theDoccolor=red>.createElement("TBODY");
文章来自:http://www.pyzy.nettbl.insertBefore(tbody, null);
文章来自:http://www.pyzy.nettheBodcolor=red>y.insertBefore(tbl, null);
文章来自:http://www.pyzy.netfor (i=0; i<max; i++) {
文章来自:http://www.pyzy.nettr = theDoccolor=red>.createElement("TR");
文章来自:http://www.pyzy.nettd = theDoccolor=red>.createElement("TD");
文章来自:http://www.pyzy.nettext = theDoccolor=red>.createTextNode("Text");
文章来自:http://www.pyzy.nettd.insertBefore(text, null);
文章来自:http://www.pyzy.nettr.insertBefore(td, null);
文章来自:http://www.pyzy.nettbodcolor=red>y.insertBefore(tr, null);
文章来自:http://www.pyzy.net}
文章来自:http://www.pyzy.net</script>
文章来自:http://www.pyzy.net</body>
文章来自:http://www.pyzy.net</html>
文章来自:http://www.pyzy.netView the third sample.
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net此次运行时间只有2100ms,节约了大约10%的时间。使用本地变量而不是直接引用document对象平均每次节约了0.4毫秒。
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net一个常用的优化性能的方法是:当脚本不需要立即运行时,在<SCRIPT>标签中设置“defer”属性。 (立即脚本没有被包含在一个function块中,因此会在加载过程中执行。) 设置“defer”属性后,IE就不必等待该脚本装载和执行完毕。这样页面加载会更快。一般来说,这也表明立即脚本最好放在function块中,并在document或者body对象的onload 句柄中处理该函数。在有一些脚本需要依赖用户操作而执行时----例如点击按钮,或者移动鼠标到某个区域----使用该属性非常有用。但当有一些脚本需要在页面加载过程中或加载完成后执行,使用defer属性得到的好处就不太大。
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net下面是使用了defer属性修改后的代码版本:
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net<html>
文章来自:http://www.pyzy.net<body onload="init()">
文章来自:http://www.pyzy.net<script defer>
文章来自:http://www.pyzy.netfunction init() {
文章来自:http://www.pyzy.netvar tbl, tbody, tr, td, text, i, max;
文章来自:http://www.pyzy.netmax = 1000;
文章来自:http://www.pyzy.netvar theDoc = document;
文章来自:http://www.pyzy.netvar theBody = theDoc.body;
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.nettbl = theDoccolor=red>.createElement("TABLE");
文章来自:http://www.pyzy.nettbl.border = "1";
文章来自:http://www.pyzy.nettbody = theDoccolor=red>.createElement("TBODY");
文章来自:http://www.pyzy.nettbl.insertBefore(tbody, null);
文章来自:http://www.pyzy.nettheBodcolor=red>y.insertBefore(tbl, null);
文章来自:http://www.pyzy.netfor (i=0; i<max; i++) {
文章来自:http://www.pyzy.nettr = theDoccolor=red>.createElement("TR");
文章来自:http://www.pyzy.nettd = theDoccolor=red>.createElement("TD");
文章来自:http://www.pyzy.nettext = theDoccolor=red>.createTextNode("Text");
文章来自:http://www.pyzy.nettd.insertBefore(text, null);
文章来自:http://www.pyzy.nettr.insertBefore(td, null);
文章来自:http://www.pyzy.nettbodcolor=red>y.insertBefore(tr, null);
文章来自:http://www.pyzy.net}
文章来自:http://www.pyzy.net}
文章来自:http://www.pyzy.net</script>
文章来自:http://www.pyzy.net</body>
文章来自:http://www.pyzy.net</html>
文章来自:http://www.pyzy.netView the fourth sample.
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net这次测试的时间为2043 ms。相对基线测试提高了12%,比上次测试提高了2.5%。
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net下面我们谈到的一个改进方法非常有用,当然也稍微麻烦一点。当需要创建元素然后将其插入树状的结构中时,将其直接插入到主干中效率更高----而不是首先将其插入大的子树,然后再将大的子树插入主干。例如,如果你创建一个每行有一列、列中有一些文字的表,你可以这样做:
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net1. 创建<TR>
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net2. 创建<TD>
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net3. 创建TextNode节点
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net4. 将TextNode 插入<TD>
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net5. 将<TD> 插入到 <TR>
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net6. 将<TR>插入到TBODY
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net当它要比下面的方法慢一些:
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net1. 创建<TR>
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net2. 创建<TD>
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net3. 创建TextNode
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net4. 将<TR> 插入到TBODY
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net5. 将<TD> 插入到<TR>
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net6. 将TextNode插入到<TD>
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net上面的四次测试使用的都是前一种方法。我们用后一种方法进行第5次测试。代码如下:
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net<html>
文章来自:http://www.pyzy.net<body onload="init()">
文章来自:http://www.pyzy.net<script defer>
文章来自:http://www.pyzy.netfunction init() {
文章来自:http://www.pyzy.netvar tbl, tbody, tr, td, text, i, max;
文章来自:http://www.pyzy.netmax = 1000;
文章来自:http://www.pyzy.netvar theDoc = document;
文章来自:http://www.pyzy.netvar theBody = theDoc.body;
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.nettbl = theDoccolor=red>.createElement("TABLE");
文章来自:http://www.pyzy.nettbl.border = "1";
文章来自:http://www.pyzy.nettbody = theDoccolor=red>.createElement("TBODY");
文章来自:http://www.pyzy.nettbl.insertBefore(tbody, null);
文章来自:http://www.pyzy.nettheBodcolor=red>y.insertBefore(tbl, null);
文章来自:http://www.pyzy.netfor (i=0; i<max; i++) {
文章来自:http://www.pyzy.nettr = theDoccolor=red>.createElement("TR");
文章来自:http://www.pyzy.nettd = theDoccolor=red>.createElement("TD");
文章来自:http://www.pyzy.nettext = theDoccolor=red>.createTextNode("Text");
文章来自:http://www.pyzy.nettbodcolor=red>y.insertBefore(tr, null);
文章来自:http://www.pyzy.nettr.insertBefore(td, null);
文章来自:http://www.pyzy.nettd.insertBefore(text, null);
文章来自:http://www.pyzy.net}
文章来自:http://www.pyzy.net}
文章来自:http://www.pyzy.net</script>
文章来自:http://www.pyzy.net</body>
文章来自:http://www.pyzy.net</html>
文章来自:http://www.pyzy.netView the fifth sample.
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.netTest5只需1649ms。这比上次测试提高了25%,比基线快了几乎30%。
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net随后的修改是使用了预制的样式表。使用了预制样式表的表格列宽或者是通过<COL>标签设置,没有<COL>标签时,每列的宽度均匀分布。因为不需要对每一列重新计算大小等,使用样式表实际上提高了性能,尤其当表格中的列数很多时。
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net增加样式表(CSS)的代码非常简单,如下:
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.nettbl.style.tableLayout = "fixed";
文章来自:http://www.pyzy.netView the sixth sample.
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net因为我们测试中的表格只有一列,这种改变只提高了页面1.6%的性能。如果有更多的列,性能增加会更多。
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net最后两次测试改变了将文字插入到表格中的方法。前面的测试中,我们都先创建一个TextNode ,然后将其插入到TD中。在Test7中, 取而代之,我们通过innerText 指定包含的文字。修改的代码是:
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.nettd.innerText = "Text";
文章来自:http://www.pyzy.netView the seventh sample.
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net令人惊奇的是,这次修改产生的差异很大----比上次提高了9%的性能,比最初总共提高了36%的性能。时间从最初的2323ms到最后的1473ms。
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net现在,几乎人人都知道使用element.innerHTML 非常慢. 为了看看究竟它如何慢,我做了最后一次测试:使用 innerHTML替代innerText插入文字。这大大降低了性能。时间达到3375ms,比上次测试慢了80%,比基线测试慢了45%。显然,innerHTML是非常耗时的。
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net调整HTML页面性能类似于调整Win32应用程序性能;需要知道什么慢,什么快。希望这些方法能帮你提高页面性能。
文章来自:http://www.pyzy.net
文章来自:http://www.pyzy.net


上一篇:[Javascript]用javascript绘图—js2d函数集   下一篇:[Javascript]限制图片上传长宽的javascript代码

本站所有文章均为系统从互联网自动获取、分析后入库,文章内容不代表本站立场;

本程序及文章内容仅供学习之用,所有的资料和图象均以获得信息为目的;所有的资料和图象均不得用于商业目的;

本网站(PYZY.net)所有的内容中若涉及您的权益请及时与俺联系QQ:33918148。