Javascript 点滴： 性能

1. 尽量避免使用Eval
   Eval在Javascript中是属于运行效率很慢一类的代码。

<input id="txtNumber" name="txtNumber" />
<script language="javascript" type="text/javascript"> 
var start = new Date();
for(var i=0;i<10000;i++)  
{
    eval("txtNumber").value = i;
}
var end = new Date();
alert(end-start);

// 较好的方式
start = new Date();
for(var i=0;i<10000;i++)  
{
    document.getElementById("txtNumber").value = i;
}
end = new Date();
alert(end-start);
</script>

   运行上面这段脚本，差异是比较大的。在代码中应该当尽量避免使用Eval。在一些无法避免的情况下，应该使用临时变量来缓存eval运算的结果，像上面的代码可以改成

1var myInput = eval("txtNumber.value")
2for(var i=0;i<10000;i++)  
3{
4    myInput.value = i;
5}

2.使用最短的对象链

 1<div id="container"><table><tr><td></td></tr></table></div>
 2<script language="javascript" type="text/javascript"> 
 3var start = new Date();
 4var myContainer = document.getElementById("container");
 5for(var i=0;i<10000;i++)
 6{
 7    myContainer.childNodes[0].childNodes[0].childNodes[0].innerText =i;
 8    myContainer.childNodes[0].childNodes[0].childNodes[0].style.color = "#330000";
 9    myContainer.childNodes[0].childNodes[0].childNodes[0].style.backgroundColor = "#ffffcc";
10}
11
12var end = new Date();
13alert(end-start);
14// 较好的方式
15start = new Date();
16var myContainer = document.getElementById("container").childNodes[0].childNodes[0].childNodes[0];
17for(var i=0;i<10000;i++)
18{
19    myContainer.innerText =i;
20    myContainer.style.color = "#330000";
21    myContainer.backgroundColor = "#ffffcc";
22}
23
24end = new Date();
25alert(end-start);
26</script> 

尽量使用短的对象链,好的方法也是用临时变量来缓存要操作的对象。

3. 循环

 1假设页面上有较多的Input元素
 2<script language="javascript" type="text/javascript"> 
 3var inputs = document.getElementsByTagName("INPUT");
 4var start = new Date();
 5for(var i=0;i<inputs.length;i++)
 6{
 7    inputs[i].value = i;
 8}
 9var end = new Date();
10alert(end-start);
11
12// 较好的方式
13start = new Date();
14for(var i=0,len=inputs.length;i<len;i++)
15{
16    inputs[i].value = i;
17}
18end = new Date();
19alert(end-start);
20</script>
21

上面这段主要的问题是在判断i < inputs.length时，每次都会计算inputs.length，这个也是很费事的计算，如果inputs.length是1000的，下面的循环就减少了999次inputs.length的计算。
while 结构的效率与for的效率基本是一样的

4.字符串的连接

 字符串的问题似乎到哪是都是个问题。

<script language="javascript" type="text/javascript"> 
var start = new Date();
for(var i=0;i<10000;i++)
{
    var h ="hello"; // 创建第一个字符串
    var j ="javascript!"; // 创建第二个字符串
    var s = h;
    s+=" ,"; // 创建第三个字符串
    s+=j; // 创建第四个字符串
}
var end = new Date();
alert(end-start);

// 较好的方式
start = new Date();
for(var i=0;i<10000;i++)
{
    var s = "hello"  + " ," + "javascript!"; // 创建一个字符串      
}
end = new Date();
alert(end-start);

// 较好的方式

var strings = [];
for(var i=0;i<10000;i++)
{
    strings.push("hello");
    strings.push("javascript");
}
var s = strings.join("\n");

4.JSON

 JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。

var customers =[{Name:"张三",Address:"北京",},{Name:"李四",Address:"上海"},{Name:"王二",Address:"广州"}];
for(var i=0,len=customers.length;i < len;i++)
{
    alert("Name:"+customer[i].Name + " Address:"+customer[i].Address);
}

另外声明数组可以用 var array =[]代替 var array = new Array(); 曾经看过一点资料，说效率会更好一些，但好像不是很好做测试，但我还是很相信，至少看上去更精简。

5.DOM
 与DOM的交互是javascript编码中很大的一部分，因此，这部分代码的运行效率很大程序上就影响了整个javascript的效率。
 但这一块的确非常大，很难非常深入去比较其中的细节。
 从以前的开发经验来讲，我的感觉就是尽量少用document.createTextNode之类的方法来创建新的对象，而应该尽量用innerHTML,innerText,insertAdjacentHTML之类方法和属性
 cloneNode也会比createElement的效率会高一些。
 
6.代码风格
 javascript是一种解释型的脚本语言，调试一直是Web的恶梦。好的代码风格是非常必要的，方便阅读和维护。例好，声明变量一定要加上var(不加上var 可能会使局部变量和全局变量混在一起)
 ,每条语句要加上分号结尾(为了减少js文件的大小，在发布时通常会对js文件去掉换行符之类对行压缩，没有分号结尾，这个压缩基本就不行了)
 
7.CSS和页面布局
  对HTML元素进行样式控制是常有的事，前景色，后景色，背景图，定位，如果全部用JS来设置，10行代码都不定能搞定，用CSS一行就好了。
  好的页面布局能很好的改善DOM结构，会方便javascript的编码。