코드 성능 향상을 위한 팁 - 1000행 테이블 생성을 example_javascript 팁으로 활용
- WBOY원래의
- 2016-05-16 19:28:36974검색
微软的开发周期中很重要的一块是调整产品的性能。性能调整也是开发者应当留心的关键部分之一。 经过多年发展，业界对于如何优化Win32程序性能已经有非常多的了解。
现在开发者遇到的问题之一是不太清楚是什么导致DTHML和HTML页面运行快或者慢。当然，有一些很简单的方法——比如不要使用2MB大的图片。我们曾经使用过另外一些有趣的技巧提高了DHTML页面的性能，希望它们能帮助你改善自己的页面性能。
这里我使用了一个建立Table的程序例子。其中用document.createElement()和element.insertBefore()方法创建了1000行(Row)的表(Table)。每行有一列(Cell)。Cell中包含的内容称为"Text"。这段代码能有多糟呢？这么小的程序又能有多大调整余地呢？请看介绍。
一开始我写了一段自认为会很快的程序，我尽量避免一些低级问题----像没有显式定义变量、或者在一个页面中同时使用VBScript和Javascript。程序如下：
<script><br>var tbl, tbody, tr, td, text, i, max;<br>max = 1000;</p> <p>tbl = document.createElement("TABLE");<br>tbl.border = "1";<br>tbody = document.createElement("TBODY");<br>tbl.insertBefore(tbody, null);<br>document.body.insertBefore(tbl, null);<br>for (i=0; i<max; i++) {<BR>tr = document.createElement("TR");<BR>td = document.createElement("TD");<BR>text = document.createTextNode("Text");<BR>td.insertBefore(text, null);<BR>tr.insertBefore(td, null);<BR>tbody.insertBefore(tr, null);<BR>}<BR></script>
在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次。修改后代码如下：
<script><br>var tbl, tbody, tr, td, text, i, max;<br>max = 1000;<br>var theDoc = document;<br>var theBody = theDoc.body;</p> <p>tbl = theDoc.createElement("TABLE");<br>tbl.border = "1";<br>tbody = theDoc.createElement("TBODY");<br>tbl.insertBefore(tbody, null);<br>theBody.insertBefore(tbl, null);<br>for (i=0; i<max; i++) {<BR>tr = theDoc.createElement("TR");<BR>td = theDoc.createElement("TD");<BR>text = theDoc.createTextNode("Text");<BR>td.insertBefore(text, null);<BR>tr.insertBefore(td, null);<BR>tbody.insertBefore(tr, null);<BR>}<BR></script>
View the third sample.
此次运行时间只有2100ms，节约了大约10%的时间。使用本地变量而不是直接引用document对象平均每次节约了0.4毫秒。
一个常用的优化性能的方法是：当脚本不需要立即运行时，在<SCRIPT>标签中设置“defer”属性。 (立即脚本没有被包含在一个function块中,因此会在加载过程中执行。) 设置“defer”属性后，IE就不必等待该脚本装载和执行完毕。这样页面加载会更快。一般来说，这也表明立即脚本最好放在function块中，并在document或者body对象的onload 句柄中处理该函数。在有一些脚本需要依赖用户操作而执行时----例如点击按钮，或者移动鼠标到某个区域----使用该属性非常有用。但当有一些脚本需要在页面加载过程中或加载完成后执行，使用defer属性得到的好处就不太大。</p>
<p>下面是使用了defer属性修改后的代码版本:</p>
<p><html><br><body onload="init()"><br><script defer><br>function init() {<br>var tbl, tbody, tr, td, text, i, max;<br>max = 1000;<br>var theDoc = document;<br>var theBody = theDoc.body;</p>
<p>tbl = theDoc.createElement("TABLE");<br>tbl.border = "1";<br>tbody = theDoc.createElement("TBODY");<br>tbl.insertBefore(tbody, null) ;<br>theBody.insertBefore(tbl, null);<br>for (i=0; i<max i>tr = theDoc.createElement("TR");<br>td = theDoc. createElement("TD");<br>text = theDoc.createTextNode("Text");<br>td.insertBefore(text, null);<br>tr.insertBefore(td, null);<br>tbody. insertBefore(tr, null);<br>}<br>}<br></script>