JavaScript 代码优化

PHPABC JavaScript 1,405 次浏览 , 没有评论

高级程序设计提供的发布JavaScript代码时的优化建议,总结一下:

一、字节数优化

1. 删除注释(版权及法律声明部分应保留)

2. 删除制表符和空格

3. 删除所有换行

4. 替换变量名

示例:

function show(name,age){alert(name+","+age);}

优化:

function s(n,a){alert(n+","+a);}

5. 其它减少字节数的方法

5.1 替换布尔值 用0和1替代false和true

5.2 缩短否定 用!a代替a!=b

5.3 使用字面量 用[]代替new Array(),用{}代替new Object()

不过以上优化都可以通过软件实现,目前很有多压缩工具。

二、执行效率优化

根据测试数据:Javascript比编译型的C慢5000倍,比解释型的Java慢100倍,比解释型的Perl慢10倍。

1. 关注范围(尽可能减少函数的多级调用)

示例:

function a(){}
function b(){a();}
function c(){b();}
c();   //增加了函数引用的复杂性,同时也影响执行效率

2. 尽可能使用局部变量

3. 避免with语句

4. 选择正确的算法

5. 反转循环

示例:

for(var i=0;i<inputs.length;i++){ }

优化:

for(var i=inputs.length;i>=0;i--){}   //缓存了inputs.length数据
 
for(var i=0,len=inputs.length;i<len;i++){}  //这样也是可以的

6. 翻转循环

示例:

var i=0; while(i<inputs.length){ ... i++;}

优化:

var i=0; do{... i++;}while(i<inputs.length);

再次优化:

var i=inputs.length-1; do{...}while(--i>=0);

7. 展开循环

示例:

var a=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],sum=0;
for(var i=0,len=a.length;i<len;i++){sum+=a[i];}

优化:

var a=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],sum=0;
for(var i=0,len=a.length;i<len;i++){
sum+=a[i++];
sum+=a[i++];
sum+=a[i++];
sum+=a[i++];
}   //这样只需要循环3次,比上面的for少了12次循环

8. 优化if()

示例:

if(a){}else if(b){}else if(c){}else{}  //其中c的可能性最大

优化:

if(c){}else if(a){}else if(b){}else{}  //把可能性最大的放前面,以减少判断次数

9. 避免使用+连接字符(IE6和IE7效率比较低),用Array.join()替代

10. 优先使用内置方法

比如:Math.power(a,b); //计算a的b次幂,内置方法效率要高一些

11. 存储常用值

示例代码:

var a=document.getElementsByTagName("input");
var len=a.length;   //多次使用时,把a.length存储到变量len里

12. 一行定义多个变量

示例代码:

var a,b,c,d=0,s="",arr=[],obj={};

13. 插入迭代子

示例代码:

sum+=a[i];
i++;

优化:

sum+=a[i++];

14. 使用对象字面量

示例:

var tom=new Object();
tom.name="tom";
tom.age=16;

优化:

var tom={name:"tom",age:16};

15. 节约使用DOM(避免频繁更改DOM树)

使用文档片段 (document.createDocumentFragment())缓存过程中的DOM元素。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go