也谈JavaScript代码性能优化

标签: Ajax Web JavaScript 技巧 | 发表时间:2011-06-01 21:17 | 作者:Fdream 可乐加糖
出处:http://fdream.net/blog

差不多两年前写了个选择器whiz,除在DOM查找方面做了许多优化工作之外,还在代码优化上做了很多工作,一直没有分享。抽空总结一下,基本上在jQuery、Mootools和YUI的源码里面都可以看到这些写法。有些是已经在网上分享很多遍了,众所周知的,也有一些可能写了多年的JavaScript的开发人员也不一定想得到的。如果有说得不正确的地方,还请大家指出。还有特别说明的是,其中某些写法不是很推荐,虽然代码简洁了,但是有可能造成阅读困难。

1.尽量使用源生方法(Native Method)

js是解释性语言,相比编译性语言执行速度要慢。如果浏览器已经实现了该方法,就不要再用js再去实现一遍了。另外,绝大部分情况下,浏览器已经实现的方法已经在算法方面做了很多优化,再重复实现一遍只是浪费时间和精力还有带宽。当然,如果你只是为了练习算法,那另当别论。

2.尽可能减少循环次数

代码的瓶颈大多在循环,少一层循环,就能数倍地提高性能。如果要对一个数组的每个元素进行多次操作,尽可能使用一次循环,多次操作,而不是多次循环,每次循环执行一次操作。尤其是在进行多个正则匹配的时候,尽可能合并正则表达式,在一次遍历中尽可能找到相应的匹配。

3.循环的另外一种写法

通常循环的写法:

var objs = [obj1, obj2, obj3], i = 0; len = objs.length;
for(i = 0; i < len; i++){
    dosth(obj);
}

当循环遍历的对象是object时,可以采用下面的方式来写:

var objs = [obj1, obj2, obj3], obj, i = 0;
while(obj = objs[i++]){
    dosth(obj);
}

特别注意,如果你的数组里面有可能出现0, false, null等等在条件判断为false的值,这种写法是不正确的。

4.某些情况下switch的另外一种写法

通常的switch写法:

function fun_a(){}
function fun_b(){}
function fun_c(){}
switch(con){
    case 'a':
        fun_a();
        break;
    case 'b':
        fun_b();
        break;
    case 'c':
        fun_c();
        break;
}

另外一种写法:

function fun_a(){}
function fun_b(){}
function fun_c(){}
var funs = {
        'a': fun_a,
        'b': fun_b,
        'c': fun_c
    };
funs[con]();

取值或者函数调用都可以用类似的方式来做。

5.条件判断的另外一种写法

通常情况下:

if(a){
  dosth();
}

可以这样写:

a && dosth();

6.创建对象的另外一个办法,不使用new

很多时候,我们要连续创建一些简单的object对象,并且拥有默认的属性,很多人会这么写:

function Klass(){
    this.prop_a = '';
    this.prop_b = [];
    this.prop_c = 0;
}
var objs = [], i = 0, obj;
while(i<100){
    obj = new Klass();
    obj.prop_c = i;
    objs.push(obj);
}

换种写法看看:

function create(){
    return {
        prop_a : '',
        prop_b : [],
        prop_c : 0
    };
}
var objs = [], i = 0, obj;
while(i<100){
    obj = create();
    obj.prop_c = i;
    objs.push(obj);
}

当然还有直接声明的方式,但是复用性会差一些。

7.用来做标记的变量尽可能使用布尔类型

直接用true和false做标记,不要使用数字或者字符串的1和0来做标记,直接也高效。

其他的优化方法已经有很多分享了,大家可以Google一下,另外《javascript高级程序设计》一书中也对JavaScript性能优化做了较为详细的阐述。

Related Posts:

相关 [javascript 代码 性能优化] 推荐:

也谈JavaScript代码性能优化

- 可乐加糖 - Fdream&#39;s Blog
差不多两年前写了个选择器whiz,除在DOM查找方面做了许多优化工作之外,还在代码优化上做了很多工作,一直没有分享. 抽空总结一下,基本上在jQuery、Mootools和YUI的源码里面都可以看到这些写法. 有些是已经在网上分享很多遍了,众所周知的,也有一些可能写了多年的JavaScript的开发人员也不一定想得到的.

JavaScript性能优化

- - ITeye博客
互联网泡沫让投资者长了记性:态度更加谨慎.         如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍JavaScript性能优化的技巧,并提供相应的测试用例,供大家在自己使用的浏览器上验证, 同时会对特定的JavaScript背景知识做一定的介绍.

javaScript的性能优化

- - JavaScript - Web前端 - ITeye博客
随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术. 而现在Ajax则是最为流行的一种方式. JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验,希望能帮助大家改进自己的JavaScript脚本性能.

javascript性能优化-repaint和reflow

- - 博客园_首页
repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染. reflow(渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显.

JavaScript性能优化小知识总结

- - 码农网
JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 一直在学习javascript,也有看过《犀利开发Jquery内核详解与实践》,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解.

Java 代码性能优化

- - IT瘾-geek
代码 优化,一个很重要的课题. 可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢. 这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗. 没用,但是,吃的小虾米一多之后,鲸鱼就被喂饱了. 代码优化也是一样,如果项目着眼于尽快无BUG上线,那么此时可以抓大放小,代码的细节可以不精打细磨;但是如果有足够的时间开发、维护代码,这时候就必须考虑每个可以优化的细节了,一个一个细小的优化点累积起来,对于代码的运行效率绝对是有提升的.

两行 JavaScript 代码

- MessyCS - Dreamer&#39;s Blog
最近看到了两行 JavaScript 代码,很受启发. 在 JavaScript 中,我们可以获取HTML元素的属性值,例如 element.id. 但是,因为 for 和 class 是 JavaScript 中的关键字,所以在 JavaScript 中这两个属性名称分别用 htmlFor 和 className 代替,于是在封装的时候需要先对这两个属性进行特殊判断.

JavaScript的性能优化:加载和执行

- - ITeye资讯频道
 随着Web2.0技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使JavaScript在浏览器中的性能成为开发者所面临的最重要的可用性问题. 而这个问题又因JavaScript的阻塞特性变的复杂,也就是说当浏览器在执行JavaScript代码时,不能同时做其他任何事情.

JavaScript 的性能优化:加载和执行

- - Web前端 - ITeye博客
文章源自:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html. JavaScript 的性能优化:加载和执行. 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.

一段Javascript的代码

- Deland - 酷壳 - CoolShell.cn
我们先看一段Javascript的代码,如下所示:(你能看出来这是干什么的. 这段代码来自BlackHat DC 2011((黑帽安全大会,全世界最大两个黑客大会之一,另一个是Defcon)中的一个叫Ryan Barnett黑客做的XSS Street-Fight. 的演讲(XSS是Web上比较经典的跨站式攻击,操作起来也有些复杂),一共69页,基本上都是一些比较枯燥的Javascript,不过这段代码挺有意思的,如果上面这段代码换个样子:.