Javascript常用优化方法

作者: gaohailin 分类: 网站技术 发布时间: 2011-05-21 05:13

对于Javascript的代码速度,我们一般可以将它分为下载时间和执行速度两部分,所以,要做优化的话,我们可以从这两部分来入手。

一、优化代码下载速度

  1. 在单个TCP-IP包中,最多能放入的字节数是1160,所以每个js文件的字节大小,最好不要超过这个数,以便获得最优的下载时间。
  2. 合并js文件。如果一个页面中存在加载多个js外部文件的情况,则最好将它们合并为一个,这样可以有效减少HTTP请求数,从而节省下载时间。
  3. 为外部js使用不同的域名。我们知道,浏览器在下载页面时,对于同一个域名下的最大并发数是一定的(例如IE6/7在HTTP1.0下是2个,而Firefox3是6个),所以,假如前端页面的域名是www.phpblog.cn的话,外部js文件的域名可以改为js.phpblog.cn,这样做就可以使浏览器在js.phpblog.cn域名上也使用最大并发数下载,从而加快下载速度。(以上只是拿我的域名作为例子,目前我的站点还没有这样做)
  4. 浏览器缓存。在页面中引用的外部js文件是可以被浏览器缓存的,缓存时间由服务器发给客户端代理头部中的Last-modified、Etag或者Expires决定,所以缓存的时间长短,也成了优化速度的一个方面。我建议将js的缓存时间设置的较长,而如果一旦更改了js文件后,可以在引用url的js文件后加个自定义参数,来强迫客户端重新下载js。例如:

    <script src=”http://js.phpblog.cn/jquery.js?var=2.0″ type=”text/javascript”></script>

  5. 删除代码中的注释、制表符、空格、换行,这样做可以有效减小 js文件的体积。我们可以使用现成的工具来做这件事情,例如我之前介绍过的Google Closure Compiler。
  6. 替换变量名,将较长的变量名替换为较短的变量名,以减少js文件体积。这方面,用Google Closure Compiler也可以完成。
  7. 替换布尔值。我们知道,对于比较来说,true等于1,false等于0。因此,在脚本中的true、false都可以用1和0来代替,这样可以减少几个字节。
  8. 使用数组和对象字面量。例如,定义数组时,使用var o = new []而不使用var o = new Array;定义对象时,使用var o = {}而不使用var o = new Object,它们是完全等价的。

二、优化代码执行时间

  1. 关注变量范围。在js中,变量范围是很重要的。我们可以认为变量的范围在浏览器中是一个树状层级,查找一个变量时,浏览器首先会在最近的范围中查找,如果没有找到,则会到它的父范围中查找,如果还没有找到,则再去父父的范围中查找,直到查找到window对象范围(浏览器默认的全局变量属于window对象)。这就说明,让浏览器最快的找到变量,就可以加快代码的执行速度。在js中,使用var定义的变量为局部范围变量,而不使用var定义的变量属于全局范围变量,所以,如果我们在某个方法中用到的变量,一定要将它定义成局部变量,这样就不会使浏览器一直找到window对象才获得该变量。和变量范围有关的另一个优化技巧就是,不使用with语句。因为with语句会创建另一个范围,增加了不必要的查找。
  2. 反转循环。在使用for循环时,我们经常这样用:

    for(i=0; i<100; i++) {}

    但是,你需要知道,将循环反转后,它的速度将更快:

    for(i=100; i>=0; i–) {}

    这是因为,使用常数0来做为判断依据速度更快。当然,使用while循环也可以反转(变换成do..while),具体方法,我就在这里不再赘述。

  3. 除了反转循环,我们还可以使用循环合并,来进一步提高循环的速度。关于循环合并的具体方法,我在这篇文章里已经介绍过。这里要特别说明的是,while循环也可以合并,方法和反转循环一样,也是使用do…while来替。
  4. 使用js的内置方法。例如,我们要计算一个数的阶乘,假如你不知道Math对象有个pow()方法的话,你很可能会自己写一个阶乘计算函数,但是要知道,这样做的效率是远远不如直接调用内置方法Math.pow()的,因为内置方法是用C++或C语言编译过的,速度要远远高于解释运行的js。
  5. 字符串连接优化。使用”+”来连接字符串的效率是很差的,尤其表现在一次连接多个字符串时,例如:

    var s = “a” + “b” + “c” + “d”;

    因为此时js内部会进行多次连接操作,从而导致效率的下降。为了避免这个问题,我们可以使用Array.join()方法来代替:

    var a = [“a”, “b”, “c”, “d”];

    var s = a.join();

  6. 存储常用的值。在js中,访问某个对象的属性,从效率上来说,都是非常昂贵的操作。所以可以将多次用到的值存储到一个变量里。例如,下面这个代码速度较慢:

    o1.style.left = document.body.clientWidth;

    o2.style.left = document.body.clientWidth;

    而下面的代码速度较快:

    var left = document.body.clientWidth;

    o1.style.left = left;

    o2.style.left = left;

  7. 在js中,脚本中的语句越少,执行速度越快。基于这个原则,我们可以知道,使用一个var来定义多个变量,要快于多个var定义。例如:

    var a = 1, b = 2, c = 3;

    要快于:

    var a = 1;

    var b = 2;

    var c = 3;

    同样,以下的代码:

    var s = a[i++];

    要快于:

    var s = a[i];

    i++;

  8. 节约使用DOM。在用js改变页面上任何一个元素的样式时(或者增加删除元素),都会导致浏览器重新渲染页面,这个开销是不小的。因此,在连续多次操作DOM时,我们可以先将所有变化保存到DOM碎片(fragment)中,然后再一次性操作页面DOM。例如:

    var arrText=[“1″,”2″,”3″,”4″,”5″,”6″,”7″,”8″,”9″,”10”];

    var oFrag=document.createDocumentFragment();

    for(var i=0;i

    {

    var op=document.createElement(“P”);

    var oText=document.createTextNode(arrText[i]);

    op.appendChild(oText);

    oFrag.appendChild(op);

    }

    document.body.appendChild(oFrag);

以上这些,只是我知道的一些优化方法,当然,js中的优化方法肯定不止这一些,我只能是抛砖引玉,更多的方法,还需要大家一起补充。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

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