最新更新 sitemap 设计搜素
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
网上家居 虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442

如何优化JavaScript脚本的性能

日期:02-25    来源:|    作者:


  其他
 
  脚本引擎
 
  据我测试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=0start = (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=0start = (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:
 
  for(var i=0;i<100;i++){ arr[i]=0; }
 
  代码2:
 
  var i = 0; while(i < 100){ arr[i++]=0; }
 
  代码3:
 
  var i = 0; while(i < 100){ arr[i]=0; i++; }
 
  在firefox下测试这两段代码,结果是代码2优于代码1和3,而代码1一般优于代码3,有时会被代码3超过;而在IE 6.0下,测试压力较大的时候(如测试10000次以上)代码2和3则有时候优于代码1,有时候就会远远落后代码1,而在测试压力较小(如5000次),则代码2>代码3>代码1.
 
  代码4:
 
  var i = 0; var a; while(i < 100){ a = 0; i++; }
 
  代码5:
 
  var a; for(var i=0;i<100;i++){ a = 0; }
 
  上面两段代码在Firefox和IE下测试结果都是性能接近的。
 
  代码6:
 
  var a; var i=0; while(i<100){ a=i; i++; }
 
  代码7:
 
  var a; var i=0; while(i<100){ a=i++; }
 
  代码8:
 
  var a; for(var i=0;i<100;i++){ a = i; }
 
  代码9:
 
  var a; for(var i=0;i<100;){ a = i++; }
 
  这四段代码在Firefox下6和8的性能接近,7和9的性能接近,而6, 8 < 7, 9;
 
  最后我们来看一下空循环
 
  代码10:
 
  for(var i=0;i<100;i++){ }
 
  代码11:
 
  var i; while(i<100){ i++; }
 
  最后的测试出现了神奇的结果,Firefox下代码10所花的时间与代码11所花的大约是24:1.所以它不具备参考价值,于是我没有放在一开始给大家看。