1. 尽量避免使用Eval
Eval在Javascript中是属于运行效率很慢一类的代码。
<
input
id
="txtNumber"
name
="txtNumber"
/>
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
script
language
="javascript"
type
="text/javascript"
>
var start = new Date();
for(var i=0;i<10000;i++)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
eval("txtNumber").value = i;
}
var end = new Date();
alert(end-start);
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 较好的方式
start = new Date();
for(var i=0;i<10000;i++)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
document.getElementById("txtNumber").value = i;
}
end = new Date();
alert(end-start);
</
script
>
运行上面这段脚本,差异是比较大的。在代码中应该当尽量避免使用Eval。在一些无法避免的情况下,应该使用临时变量来缓存eval运算的结果,像上面的代码可以改成
1
var
myInput
=
eval(
"
txtNumber.value
"
)
2
for
(
var
i
=
0
;i
<
10000
;i
++
)
3
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
4
myInput.value = i;
5
}
2.使用最短的对象链
1
<
div
id
="container"
><
table
><
tr
><
td
></
td
></
tr
></
table
></
div
>
2
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
script
language
="javascript"
type
="text/javascript"
>
3
var start = new Date();
4
var myContainer = document.getElementById("container");
5
for(var i=0;i<10000;i++)
6![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
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![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
var end = new Date();
13
alert(end-start);
14
// 较好的方式
15
start = new Date();
16
var myContainer = document.getElementById("container").childNodes[0].childNodes[0].childNodes[0];
17
for(var i=0;i<10000;i++)
18![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
19
myContainer.innerText =i;
20
myContainer.style.color = "#330000";
21
myContainer.backgroundColor = "#ffffcc";
22
}
23![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
end = new Date();
25
alert(end-start);
26
</
script
>
尽量使用短的对象链,好的方法也是用临时变量来缓存要操作的对象。
3. 循环
1
假设页面上有较多的Input元素
2
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
script
language
="javascript"
type
="text/javascript"
>
3
var inputs = document.getElementsByTagName("INPUT");
4
var start = new Date();
5
for(var i=0;i<inputs.length;i++)
6![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
7
inputs[i].value = i;
8
}
9
var end = new Date();
10
alert(end-start);
11![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
// 较好的方式
13
start = new Date();
14
for(var i=0,len=inputs.length;i<len;i++)
15![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
16
inputs[i].value = i;
17
}
18
end = new Date();
19
alert(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++)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
var h ="hello"; // 创建第一个字符串
var j ="javascript!"; // 创建第二个字符串
var s = h;
s+=" ,"; // 创建第三个字符串
s+=j; // 创建第四个字符串
}
var end = new Date();
alert(end-start);
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 较好的方式
start = new Date();
for(var i=0;i<10000;i++)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
var s = "hello" + " ," + "javascript!"; // 创建一个字符串
}
end = new Date();
alert(end-start);
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 较好的方式
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var strings = [];
for(var i=0;i<10000;i++)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
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的编码。