优化JavaScript脚本的性能的几个注意事项


Posted in Javascript onDecember 22, 2006

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

语言层次方面
循环
循环是很常用的一个控制结构,大部分东西要依靠它来完成,在JavaScript中,我们可以使用for(;;),while(),for(in)三种循环,事实上,这三种循环中for(in)的效率极差,因为他需要查询散列键,只要可以就应该尽量少用。for(;;)和while循环的性能应该说基本(平时使用时)等价。

而事实上,如何使用这两个循环,则有很大讲究。我在测试中有些很有意思的情况,见附录。最后得出的结论是:

如果是循环变量递增或递减,不要单独对循环变量赋值,应该在它最后一次读取的时候使用嵌套的++或—操作符。

如果要与数组的长度作比较,应该事先把数组的length属性放入一个局部变量中,减少查询次数。

局部变量和全局变量
局部变量的速度要比全局变量的访问速度更快,因为全局变量其实是全局对象的成员,而局部变量是放在函数的栈当中的。

不使用Eval
使用eval相当于在运行时再次调用解释引擎对内容进行运行,需要消耗大量时间。这时候使用JavaScript所支持的闭包可以实现函数模版(关于闭包的内容请参考函数式编程的有关内容)

减少对象查找
因为JavaScript的解释性,所以a.b.c.d.e,需要进行至少4次查询操作,先检查a再检查a中的b,再检查b中的c,如此往下。所以如果这样的表达式重复出现,只要可能,应该尽量少出现这样的表达式,可以利用局部变量,把它放入一个临时的地方进行查询。

这一点可以和循环结合起来,因为我们常常要根据字符串、数组的长度进行循环,而通常这个长度是不变的,比如每次查询a.length,就要额外进行一个操作,而预先把var len=a.length,则就少了一次查询。

字符串连接
如果是追加字符串,最好使用s+=anotherStr操作,而不是要使用s=s+anotherStr。

如果要连接多个字符串,应该少使用+=,如

s+=a;s+=b;s+=c;
应该写成

s+=a + b + c;
而如果是收集字符串,比如多次对同一个字符串进行+=操作的话,最好使用一个缓存。怎么用呢?使用JavaScript数组来收集,最后使用join方法连接起来,如下

var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");
类型转换
类型转换是大家常犯的错误,因为JavaScript是动态类型语言,你不能指定变量的类型。

1. 把数字转换成字符串,应用"" + 1,虽然看起来比较丑一点,但事实上这个效率是最高的,性能上来说:

("" +) > String() > .toString() > new String() 

这条其实和下面的“直接量”有点类似,尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。

String()属于内部函数,所以速度很快,而.toString()要查询原型中的函数,所以速度逊色一些,new String()用于返回一个精确的副本。

2. 浮点数转换成整型,这个更容易出错,很多人喜欢使用parseInt(),其实parseInt()是用于将字符串转换成数字,而不是浮点数和整型之间的转换,我们应该使用Math.floor()或者Math.round()。

另外,和第二节的对象查找中的问题不一样,Math是内部对象,所以Math.floor()其实并没有多少查询方法和调用的时间,速度是最快的。

3. 对于自定义的对象,如果定义了toString()方法来进行类型转换的话,推荐显式调用toString(),因为内部的操作在尝试所有可能性之后,会尝试对象的toString()方法尝试能否转化为String,所以直接调用这个方法效率会更高

使用直接量
其实这个影响倒比较小,可以忽略。什么叫使用直接量,比如,JavaScript支持使用[param,param,param,...]来直接表达一个数组,以往我们都使用new Array(param,param,...),使用前者是引擎直接解释的,后者要调用一个Array内部构造器,所以要略微快一点点。

同样,var foo = {}的方式也比var foo = new Object();快,var reg = /../;要比var reg=new RegExp()快。

字符串遍历操作
对字符串进行循环操作,譬如替换、查找,应使用正则表达式,因为本身JavaScript的循环速度就比较慢,而正则表达式的操作是用C写成的语言的API,性能很好。

高级对象
自定义高级对象和Date、RegExp对象在构造时都会消耗大量时间。如果可以复用,应采用缓存的方式。

DOM相关
插入HTML
很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低,如果需要直接插入HTML,可以找一个容器元素,比如指定一个div或者span,并设置他们的innerHTML来将自己的HTML代码插入到页面中。

对象查询
使用[“”]查询要比.items()更快,这和前面的减少对象查找的思路是一样的,调用.items()增加了一次查询和函数的调用。

创建DOM节点
通常我们可能会使用字符串直接写HTML来创建节点,其实这样做

无法保证代码的有效性

字符串操作效率低

所以应该是用document.createElement()方法,而如果文档中存在现成的样板节点,应该是用cloneNode()方法,因为使用createElement()方法之后,你需要设置多次元素的属性,使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素,应该先准备一个样板节点。

定时器
如果针对的是不断运行的代码,不应该使用setTimeout,而应该是用setInterval。setTimeout每次要重新设置一个定时器。

其他
脚本引擎
据我测试Microsoft的JScript的效率较Mozilla的Spidermonkey要差很多,无论是执行速度还是内存管理上,因为JScript现在基本也不更新了。但SpiderMonkey不能使用ActiveXObject

文件优化
文件优化也是一个很有效的手段,删除所有的空格和注释,把代码放入一行内,可以加快下载的速度,注意,是下载的速度而不是解析的速度,如果是本地,注释和空格并不会影响解释和执行速度。

总结
本文总结了我在JavaScript编程中所找到的提高JavaScript运行性能的一些方法,其实这些经验都基于几条原则:

直接拿手头现成的东西比较快,如局部变量比全局变量快,直接量比运行时构造对象快等等。

尽可能少地减少执行次数,比如先缓存需要多次查询的。

尽可能使用语言内置的功能,比如串链接。

尽可能使用系统提供的API,因为这些API是编译好的二进制代码,执行效率很高

同时,一些基本的算法上的优化,同样可以用在JavaScript中,比如运算结构的调整,这里就不再赘述了。但是由于JavaScript是解释型的,一般不会在运行时对字节码进行优化,所以这些优化仍然是很重要的。

当然,其实这里的一些技巧同样使用在其他的一些解释型语言中,大家也可以进行参考。

参考
http://www.umsu.de/jsperf/ 各种浏览器的测试对比

http://home.earthlink.net/~kendrasg/info/js_opt/ 

附录1
由于是以前做过的测试,测试代码已经不全,我补充了一部分如下:

var print;

if(typeof document != "undefined" ){
    print = function(){
  document.write(arguments[0]);
 }
}else if(typeof WScript != "undefined" ){
    print = function(){
        WScript.Echo(arguments[0],arguments[1],arguments[2]);
    }
}

function empty(){
}

function benchmark(f){
    var i = 0;
    var start = (new Date()).getTime();

    while(i < pressure){
        f(i++);
    }
    var end = (new Date()).getTime();
    WScript.Echo(end-start);
}

/*
i=0
start = (new Date()).getTime();
while(i < 60000){
    c = [i,i,i,i,i,i,i,i,i,i];
    i++;
}
end = (new Date()).getTime();
WScript.Echo(end-start);
i=0
start = (new Date()).getTime();
while(i < 60000){
    c = new Array(i,i,i,i,i,i,i,i,i,i);
    i++;
}
var end = (new Date()).getTime();
WScript.Echo(end-start);

Javascript 相关文章推荐
Javascript中的五种数据类型详解
Dec 26 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
网页设计常用的一些技巧
Dec 22 #Javascript
用JavaScript脚本实现Web页面信息交互
Dec 21 #Javascript
在 IE 中调用 javascript 打开 Excel 表
Dec 21 #Javascript
用js+xml自动生成表格的东西
Dec 21 #Javascript
FCK调用方法..
Dec 21 #Javascript
firefox中JS读取XML文件
Dec 21 #Javascript
URI、URL和URN之间的区别与联系
Dec 20 #Javascript
You might like
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php实现读取内存顺序号
2015/03/29 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
使用python实现rsa算法代码
2016/02/17 Python
python绘制条形图方法代码详解
2017/12/19 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
python实现五子棋程序
2020/04/24 Python
Python接口开发实现步骤详解
2020/04/26 Python
python搜索算法原理及实例讲解
2020/11/18 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
节水倡议书范文
2014/04/15 职场文书
学生期末评语大全
2014/04/30 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技