代码性能技巧怎样才能提高水平
微软的开发周期中很重要的一块是调整产品的性能。性能调整也是开发者应当留心的关键部分之一。 经过多年发展，业界对于如何优化Win32程序性能已经有非常多的了解。
现在开发者遇到的问题之一是不太清楚是什么导致DTHML和HTML页面运行快或者慢。当然，有一些很简单的方法——比如不要使用2MB大的图片。我们曾经使用过另外一些有趣的技巧提高了DHTML页面的性能，希望它们能帮助你改善自己的页面性能。
这里我使用了一个建立Table的程序例子。其中用document.createElement()和element.insertBefore()方法创建了1000行(Row)的表(Table)。每行有一列(Cell)。Cell中包含的内容称为"Text"。这段代码能有多糟呢？这么小的程序又能有多大调整余地呢？请看介绍。
一开始我写了一段自认为会很快的程序，我尽量避免一些低级问题----像没有显式定义变量、或者在一个页面中同时使用VBScript和Javascript。程序如下：
vartbl,tbody,tr,td,text,i,max;
max=1000;
tbl=document.createElement("TABLE");
tbl.border="1";
tbody=document.createElement("TBODY");
tbl.insertBefore(tbody,null);
document.body.insertBefore(tbl,null);
for(i=0;i<max;i++){
tr=document.createElement("TR");
td=document.createElement("TD");
text=document.createTextNode("Text");
td.insertBefore(text,null);
tr.insertBefore(td,null);
tbody.insertBefore(tr,null);
在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次。修改后代码如下：
vartbl,tbody,tr,td,text,i,max;
max=1000;
vartheDoc=document;
vartheBody=theDoc.body;
tbl=theDoc.createElement("TABLE");
tbl.border="1";
tbody=theDoc.createElement("TBODY");
tbl.insertBefore(tbody,null);
theBody.insertBefore(tbl,null);
for(i=0;i<max;i++){
tr=theDoc.createElement("TR");
td=theDoc.createElement("TD");
text=theDoc.createTextNode("Text");
td.insertBefore(text,null);
tr.insertBefore(td,null);
tbody.insertBefore(tr,null);
}
View the third sample.
此次运行时间只有2100ms，节约了大约10%的时间。使用本地变量而不是直接引用document对象平均每次节约了0.4毫秒。
一个常用的优化性能的方法是：当脚本不需要立即运行时，在
下面是使用了defer属性修改后的代码版本:
<bodyonload="init()">
<scriptdefer>
functioninit(){
vartbl,tbody,tr,td,text,i,max;
max=1000;
vartheDoc=document;
vartheBody=theDoc.body;
tbl=theDoc.createElement("TABLE");
tbl.border="1";
tbody=theDoc.createElement("TBODY");
tbl.insertBefore(tbody,null);
theBody.insertBefore(tbl,null);
for(i=0;i<max;i++){
tr=theDoc.createElement("TR");
td=theDoc.createElement("TD");
text=theDoc.createTextNode("Text");
td.insertBefore(text,null);
tr.insertBefore(td,null);
tbody.insertBefore(tr,null);
}
}
View the fourth sample.
这次测试的时间为2043 ms。相对基线测试提高了12%，比上次测试提高了2.5%。
下面我们谈到的一个改进方法非常有用，当然也稍微麻烦一点。当需要创建元素然后将其插入树状的结构中时，将其直接插入到主干中效率更高----而不是首先将其插入大的子树，然后再将大的子树插入主干。例如，如果你创建一个每行有一列、列中有一些文字的表，你可以这样做：
1. 创建
2. 创建
3. 创建TextNode节点
4. 将TextNode 插入
5. 将
插入到
6. 将
插入到TBODY
当它要比下面的方法慢一些：
1. 创建
2. 创建
3. 创建TextNode
4. 将
插入到TBODY
5. 将
插入到
6. 将TextNode插入到
上面的四次测试使用的都是前一种方法。我们用后一种方法进行第5次测试。代码如下：
functioninit(){
vartbl,tbody,tr,td,text,i,max;
max=1000;
vartheDoc=document;
vartheBody=theDoc.body;
tbl=theDoc.createElement("TABLE");
tbl.border="1";
tbody=theDoc.createElement("TBODY");
tbl.insertBefore(tbody,null);
theBody.insertBefore(tbl,null);
for(i=0;i<max;i++){
tr=theDoc.createElement("TR");
td=theDoc.createElement("TD");
text=theDoc.createTextNode("Text");
tbody.insertBefore(tr,null);
tr.insertBefore(td,null);
td.insertBefore(text,null);
}
}
View the fifth sample.
Test5只需1649ms。这比上次测试提高了25%，比基线快了几乎30%。
随后的修改是使用了预制的样式表。使用了预制样式表的表格列宽或者是通过
标签设置，没有标签时，每列的宽度均匀分布。因为不需要对每一列重新计算大小等，使用样式表实际上提高了性能，尤其当表格中的列数很多时。
增加样式表(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是非常耗时的。
学习编程是一门非常枯燥的事情，爱站技术频道小编整理的这篇文章，不仅能提高自身的代码水平，也能从中学到更多不一样的技巧，如果喜欢可以关注网站哦！希望这些方法能帮你提高页面性能。
