如何优化JavaScript脚本的性能(转蝲)

errorfun — Tue, 18 Dec 2007 12:47:00 GMT

如何优化JavaScript脚本的性能

Posted by ShiningRay on 四月 5th, 2006

作者：ShiningRay @ Nirvana Studio

随着�|�络的发展，�|�速和机器速度的提高，��来��多的网站用��C��丰富客户端技术。而现在Ajax则是最为流行的一�U�方式。JavaScript是一�U�解释型语言�Q�所以能无法辑ֈ�和C/Java之类的水�q�I��限制了它能在客户端所做的事情�Q��ؓ了能改进他的性能�Q�我惛_��于我以前�l�JavaScript做过的很多测试来谈谈自己的经验，希望能帮助大家改�q�自��q��JavaScript脚本性能�?/p>

语言层次斚w��

循环

循环是很常用的一个控制结构，大部分东西要依靠它来完成�Q�在JavaScript中，我们可以使用for(;;),while(),for(in)三种循环�Q�事实上�Q�这三种循环中for(in)的效率极差，因�ؓ他需要查询散列键�Q�只要可以就应该��量��用。for(;;)和while循环的性能应该说基本（�q�x��使用�Ӟ��{��h�?/p>

而事实上�Q�如何��用这两个循环�Q�则有很大讲�I�。我在测试中有些很有意思的情况�Q�见附录。最后得出的�l�论是：

如果是��@环变量递增或递减�Q�不要单独对循环变量赋��|��应该在它最后一�ơ读取的时候��用嵌套的++或—操作符�?/p>
如果要与数组的长度作比较�Q�应该事先把数组的length属性放入一个局部变量中�Q�减��查询次数�?/p>

局部变量和全局变量

局部变量的速度要比全局变量的访问速度更快�Q�因为全局变量其实是全局对象的成员，而局部变量是攑֜�函数的栈当中的�?/p>

不��用Eval

使用eval相当于在�q�行时再�ơ调用解释引擎对内容�q�行�q�行�Q�需要消耗大量时间。这时候��用JavaScript所支持的闭包可以实现函数模版（关于闭包的内容请参考函数式�~�程的有兛_��容）

减少对象查找

因�ؓJavaScript的解释性，所以a.b.c.d.e�Q�需要进行至��?�ơ查询操作，先检查a再检查a中的b�Q�再��查b中的c�Q�如此往下。所以如果这��L��表达式重复出玎ͼ�只要可能�Q�应该尽量少出现�q�样的表辑ּ��Q�可以利用局部变量，把它攑օ�一个��时的地方�q�行查询�?/p>

�q�一点可以和循环�l�合��h��Q�因为我们常常要�Ҏ��字符丌Ӏ�数�l�的长度�q�行循环�Q�而通常�q�个长度是不变的�Q�比如每�ơ查询a.length�Q�就要额外进行一个操作，而预先把var len=a.length�Q�则��少了一�ơ查询�?/p>

字符串连�?/h2>

如果是追加字�W�串�Q�最好��用s+=anotherStr操作�Q�而不是要使用s=s+anotherStr�?/p>

如果要连接多个字�W�串�Q�应该少使用+=�Q�如

s+=a;

s+=b;

s+=c;

应该写成

s+=a + b + c�Q?/pre>
而如果是攉���字符�Ԍ��比如多次对同一个字�W�串�q�行+=操作的话�Q�最好��用一个缓存。怎么用呢�Q���用JavaScript数组来收集，最后��用join�Ҏ���q�接��h���Q�如�?/p>
var buf = new Array();

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

buf.push(i.toString());

}

var all = buf.join("");
�c�d��转换
�c�d��转换是大家常犯的错误�Q�因为JavaScript是动态类型语�a��Q�你不能指定变量的类型�?/p>
1. 把数字�{换成字符�Ԍ��应用"" + 1�Q�虽然看��h��比较丑一点，但事实上�q�个效率是最高的�Q�性能上来��_��
("" +) > String() > .toString() > new String() 
�q�条其实和下面的“直接�?#8221;有点�c�M���Q�尽量��用编译时���p��使用的内部操作要比运行时使用的用��h��作要快�?/p>
String()属于内部函数�Q�所以速度很快�Q��?toString()要查询原型中的函敎ͼ�所以速度逊色一些，new String()用于�q�回一个精���的副本�?/p>
2. ���点数�{换成整型�Q�这个更�Ҏ��出错�Q�很多�h喜欢使用parseInt()�Q�其实parseInt()是用于将字符串�{换成数字�Q�而不是��Q�Ҏ��和整型之间的转换�Q�我们应该��用Math.floor()或者Math.round()�?/p>
另外�Q�和�W�二节的对象查找中的问题不一��P��Math是内部对象，所以Math.floor()其实�q�没有多���查询方法和调用的时��_��速度是最快的�?/p>
3. 对于自定义的对象�Q�如果定义了toString()�Ҏ��来进行类型�{换的话，推荐昑ּ�调用toString()�Q�因为内部的操作在尝试所有可能性之后，会尝试对象的toString()�Ҏ�����试能否转化为String�Q�所以直接调用这个方法效率会更高
使用直接�?/h2>
其实�q�个影响倒比较小�Q�可以忽略。什么叫使用直接量，比如�Q�JavaScript支持使用[param,param,param,...]来直接表达一个数�l�，以往我们都��用new Array(param,param,...)�Q���用前者是引擎直接解释的，后者要调用一个Array内部构造器�Q�所以要略微快一点点�?/p>
同样�Q�var foo = {}的方式也比var foo = new Object();快，var reg = /../;要比var reg=new RegExp()快�?/p>
字符串遍历操�?/h2>
对字�W�串�q�行循环操作�Q�譬如替换、查找，应��用正则表辑ּ��Q�因为本�w�JavaScript的��@环速度���比较慢�Q�而正则表辑ּ�的操作是用C写成的语�a�的API�Q�性能很好�?/p>
高��对象
自定义高�U�对象和Date、RegExp对象在构造时都会消耗大量时间。如果可以复用，应采用缓存的方式�?/p>
DOM相关
插入HTML
很多人喜�Ƣ在JavaScript中��用document.write来给��面生成内容。事实上�q�样的效率较低，如果需要直接插入HTML�Q�可以找一个容器元素，比如指定一个div或者span�Q��ƈ讄���他们的innerHTML来将自己的HTML代码插入到页面中�?/p>
对象查询
使用[“”]查询要比.items()更快�Q�这和前面的减少对象查找的思�\是一��L���Q�调�?items()增加了一�ơ查询和函数的调用�?/p>
创徏DOM节点
通常我们可能会��用字�W�串直接写HTML来创�����点，其实�q�样�?/p>

    
    无法保证代码的有效�?/p>
    

    字符串操作效率低
    

所以应该是用document.createElement()�Ҏ���Q�而如果文档中存在现成的样板节点，应该是用cloneNode()�Ҏ���Q�因��Z��用createElement()�Ҏ��之后�Q�你需要设�|�多�ơ元素的属性，使用cloneNode()则可以减���属性的讄����ơ数——同样如果需要创建很多元素，应该先准备一个样板节炏V�?/p>
定时�?/h2>
如果针对的是不断�q�行的代码，不应该��用setTimeout�Q�而应该是用setInterval。setTimeout每次要重新设�|�一个定时器�?/p>
其他
脚本引擎
据我���试Microsoft的JScript的效率较Mozilla的Spidermonkey要差很多�Q�无论是执行速度�q�是内存���理上，因�ؓJScript现在基本也不更新了。但SpiderMonkey不能使用ActiveXObject
文�g优化
文�g优化也是一个很有效的手�D�，删除所有的�I�格和注释，把代码放入一行内�Q�可以加快下载的速度�Q�注意，是下载的速度而不是解析的速度�Q�如果是本地�Q�注释和�I�格�q�不会媄响解释和执行速度�?/p>
�ȝ��
本文�ȝ��了我在JavaScript�~�程中所扑ֈ�的提高JavaScript�q�行性能的一些方法，其实�q�些�l�验都基于几条原则：

    
    直接拿手头现成的东西比较快，如局部变量比全局变量快，直接量比�q�行时构造对象快�{�等�?/p>
    

    ���可能少地减���执行次敎ͼ�比如先缓存需要多�ơ查询的�?/p>
    

    ���可能��用语�a�内置的功能，比如串链接�?/p>
    

    ���可能��用系�l�提供的API�Q�因�����些API是编译好的二�q�制代码�Q�执行效率很�?/p>
    

同时�Q�一些基本的���法上的优化�Q�同样可以用在JavaScript中，比如�q�算�l�构的调��_���q�里��׃��再赘�q�C��。但是由于JavaScript是解释型的，一般不会在�q�行时对字节码进行优化，所以这些优化仍然是很重要的�?/p>
当然�Q�其实这里的一些技巧同样��用在其他的一些解释型语言中，大家也可以进行参考�?/p>
参�?/h1>

    
    http://www.umsu.de/jsperf/ 各种���览器的���试�Ҏ��
    

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

附录1
�׃��是以前做�q�的���试�Q�测试代码已�l�不全，我补充了一部分如下�Q?/p>
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);
*/
function internCast(i){
return "" + i;
}
function StringCast(i){
return String(i)
}
function newStringCast(i){
return new String(i)
}
function toStringCast(i){
return i.toString();
}
function ParseInt(){
return parseInt(j);
}
function MathFloor(){
return Math.floor(j);
}
function Floor(){
return floor(j);
}
var pressure = 50000;
var a  = "";
var floor = Math.floor;
j = 123.123;
print("-------------\nString Conversion Test");
print("The empty:", benchmark(empty));
print("intern:", benchmark(internCast));
print("String:");
benchmark(StringCast);
print("new String:");
benchmark(newStringCast);
print("toString:");
benchmark(toStringCast);
print("-------------\nFloat to Int Conversion Test");
print("parseInt");
benchmark(ParseInt);
print("Math.floor");
benchmark(MathFloor);
print("floor")
benchmark(Floor);
function newObject(){
return new Object();
}
function internObject(){
return {};
}
print("------------\nliteral Test");
print("runtime new object", benchmark(newObject));
print("literal object", benchmark(internObject));

附录2
代码1�Q?/p>
    for(var i=0;i<100;i++){
arr[i]=0;
}



代码2�Q?/p>
    var i = 0;
while(i < 100){
arr[i++]=0;
}



代码3�Q?/p>
    var i = 0;
while(i < 100){
arr[i]=0;
i++;
}



在firefox下测试这两段代码�Q�结果是代码2优于代码1�?�Q�而代�?一般优于代�?�Q�有时会被代�?���过�Q�而在IE 6.0下，���试压力较大的时候（如测�?0000�ơ以上）代码2�?则有时候优于代�?�Q�有时候就会远�q�落后代�?�Q�而在���试压力较小�Q�如5000�ơ）�Q�则代码2>代码3>代码1�?/p>
代码4�Q?/p>
    var i = 0;
var a;
while(i < 100){
a = 0;
i++;
}



代码5�Q?/p>
    var a;
for(var i=0;i<100;i++){
a = 0;
}
上面两段代码在Firefox和IE下测试结果都是性能接近的�?/p>
代码6�Q?/p>
    var a;
var i=0;
while(i<100){
a=i;
i++;
}



代码7�Q?/p>
    var a;
var i=0;
while(i<100){
a=i++;
}



代码8�Q?/p>
    var a;
for(var i=0;i<100;i++){
a = i;
}



代码9�Q?/p>
    var a;
for(var i=0;i<100;){
a = i++;
}
�q�四�D�代码在Firefox�?�?的性能接近�Q?�?的性能接近�Q��?, 8 < 7, 9�Q?/p>
最后我们来看一下空循环
代码10�Q?/p>
    for(var i=0;i<100;i++){   }



代码11�Q?/p>
    var i;
while(i<100){        i++;    }

最后的���试出现了神奇的�l�果�Q�Firefox下代�?0所��q��旉���与代�?1所��q��大约�?4:1。所以它不具备参考�h��|��于是我没有放在一开始给大家看�?/p>

errorfun 2007-12-18 20:47 发表评论

[转]使用prototype.js 的时候应该特别注意的几个问题.

errorfun — Sat, 09 Dec 2006 02:30:00 GMT

今天自己也发��C��prototype的一个定位的bug�?/p>

转自�Q?a >http://www.cnblogs.com/ashun/archive/2006/12/08/prototype-js-bug.html

1. String.prototype.camelize BUG

�q�个�Ҏ��用来�q�回字符串的骆驼写法。用js 控制元素�?style的时候经�怋��?br />比如

var ss = " font-color "
ss = ss.camelize() // fontColor

通常情况�?camelize 会工作得很好�Q�但是有一个特列，那就是��Q动定�?amp;nbsp; float

var ss = " float "
obj.style[ss.camelize()] = " right " // �q�将��D��一个错误�?/span>

昄��Q�作者没有考虑 float�q�种�Ҏ��情况�Q�正��的写法�?

ie: obj.style.styleFloat = " right "
ff: obj.style.cssFloat = " right "

2. String.prototype.inspect   BUG

�q�里 inspect �Ҏ��是有Bug的，作者用replace �Ҏ��的时候没有用正则�Q�导致只能替换掉�W�一个匹配的字符�?br />
正确的写法应该这�?br />  inspect: function() {
    return "'" + this.replace(/\\/g, '\\\\').replace(/"/g, '\\\"') + "'";
  }

3. Array.prototype.all   BUG
�q�个�Ҏ��是否数�l�中所有元素都能够让�P代函��Cؓ真�?如果全部能满��I��则返回true�Q�否则返回false

var f = function (x){ return x % 2 == 0 } // ��查一个数是否是偶�?/span>
var arr = [ 2 , 4 , 6 ]
alert (arr.all(f) == true ) // 昄�� true

但是�?amp;nbsp; arr为空的时候，仍然�q�回 true

var arr = []
alert(arr.all(f) == true ) // 昄��true

4. Array.prototype.any BUG
�?all�Ҏ��Q�对�I�数�l�仍然返回true

5.Array.prototype.detect 也就�?find�Ҏ��
�q�个不是 Bug ,但是不看原代码很�Ҏ��让�h误解�Q�从而出错�?br />�q�个�Ҏ��查找�W�一个能满�� q�代函数的元素，最后返回元素的�?br />误解一�Q?/span>

    var f = function (x){ return x % 2 == 0 }   // ��是否是偶数
    var arr = [ 1 , 3 , 5 , 7 ]     // 故意定义一个全为奇数的数组�?/span>
   alert(arr.find(f) == false )    // false
    // 很多��以�ؓ find 函数在找不到满��条�g的元素的时候会�q�回 false ,实际上，它返回的�?amp;nbsp;"undefined"

误解二：
��L��数组中的数字元素

    var f = function (x){ return ! isNaN(x) && typeof (x) === " number " }
    var arr = [ false , " go_rush " , 0 , " 阿舜 " ]
    if (arr.find(f)) alert( " 数组中含有数字元�?/span> " )      // 事实�?amp;nbsp;�q�个 alert永远不会执行�?/span>

因�ؓ find�Ҏ��q�回的是�W�一个符合条件的倹{�?amp;nbsp; �q�里�q�回:0. 所�?....

6. 对hash 对象的处理需要格外小心的地方

var hash = {member: 1 ,test: 2 ,ids: 3 }
alert(hash.member)
alert($H(hash).inspect())
alert($H(hash).toQueryString())
// hash.member实际是存在的但是.inspect() �?amp;nbsp;.toQueryString()却当它不存在

同样下面�q�些属性也会和 prototype.js 相冲�H��?br />
each, all, any, collect, detect, findAll, grep, include, inject, invoke, max, min,
partition, pluck, reject, sortBy, toArray, zip, inspect, map, find, select, member, entries

http://community.csdn.net/Expert/topic/4964/4964523.xml?temp=4.314822E-02

errorfun 2006-12-09 10:30 发表评论

欧美日韩高清一区二区三区,在线观看国产福利视频,视频一区在线播放

如何优化JavaScript脚本的性能(转蝲)