• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
yunhuasheng's blog
everything that we can't do now ,but future with our endeavor. springfield!
博客园    首页    新随笔    联系   管理    订阅  订阅

优化JavaScript

javascript 性能优化

web开发,大家都离不开javascript,大多时候我们写的Js文件都不是太在意,其实在很多时候我们为了提高性能,还是要对javascript进行优化.下面是从<<javascript高级编程>>中得出的:


 
下载时间

Web浏览器下载的是JavaScript源码,也就是所有的长变量与注释都会包含在内。这个因素和其他因素都会增加下载时间,这会增加脚本运行的总时间。增加下载时间的关键因素就是脚本所包含的字节数。

要记住一个关键数字是1160,这是能放入单个TCP-IP包中的字节数。最好能将每个JavaScript文件都保持在1160字节以下以获取最优的下载时间。

在JavaScript中,每个字符就是一个字节,因此,每个额外的字符(不管是变量名、函数名、或者注释)都会影响下载速度。部署JavaScript之前,都应该尽可能优化下载速度。

1.删除注释

2.删除制表符和空格

3.删除所有的换行

4.替换变量名

5.ECMAScript Cruncher
利用Thomas Loo开发的ECMAScript Cruncher(ESC 可以http://www.saltstorm.net/depo/esc/或51AJAX.com下载)。ESC是一个小巧的Window Shell脚本。

利用Thomas Loo开发的ECMAScript Cruncher(ESC 可以下载)。ESC是一个小巧的Window Shell脚本。运行ESC,必须使用Windows系统。打开一个控制台窗口,输入以下命令:
cscript ESC.wsf -l [0-4] -ow outputfile.js inputfile.js [inputfile2.js]

第一部分,cscript是Windows Shell脚本解释程序。文件名ESC.wsf是ESC的程序本身。然后是压缩等级,一个0到4的数值,表示要进行优化的等级。-ow选项表示下一个参数 是优化后输出的文件名。最后,剩下的参数是要进行优化的JavaScript文件。可以只给出一个要进行优化的文件,也可以有多个文件(多个文件估优化后 会按顺序放到输出文件中)。

ESC支持的四个优化等级如下:
0:不改变脚本,要将多个文件合到单个文件中时有用;
1:删除所有的注释;
2:除等级1外,再删除额外的制表符和空格;
3:除等级2外,再删除换行;
4:除等级3外,再进行变量名替换。

ESC擅长把变量名替换成无意义的名称。它不会更改构造名称、公用特性和公用方法名称。

使用ESC时要记住,如果某个JavaScript引用了另一个文件中的构造函数,4级优化会把对构造函数的引用替换成无意义的名称。解决方法是将两个文件合并成一个文件,这样就会保持构造函数的名称。

6.其他减少字节数的方法
1)替换布尔值
  考虑下面的例子

  1.  varbFound=false;
  2.  for(var i=0;i<aTest.length;i++){
  3.    if(aTest[i]==vTest) {bFound=true;}
  4.  }

 
  可以替换为: 

  1.  varbFound=0;
  2.  for(var i=0;i    if(aTest[i]==vTest) {bFound=1;}
  3.  }

   2)缩短否定检测

  1.  if(oTest !=#ff0000) {
  2.    //do something
  3.  }
  4.  if(oTest !=null) {
  5.    //do something
  6.  }
  7.  if(oTest !=false) {
  8.    //do something
  9. }

  虽然这些都正确,但用逻辑非操作符来操作也有同样的效果

  1.  if(!oTest) {
  2.    //do something
  3.  }

 
7.使用数组和对象字面量 

  1.    varaTest = new Array;
  2.    var aTest =[];

 
第二行用了数组字面量,与第一行效果一样,但要短很多。

  类似,对象字面量也可用于节省空间,以下两行效果一行,但对象字面量要更简短

  1.    varaTest = new Object;
  2.    var aTest ={}; 

 如果要创建具有一些特性的一般对象,也可以使用字面量,如下:

  1.    varoFruit = new O;
  2.    oFruit.color="red";
  3.    oFruit.name="apple";  

  前面的代码可用对象字面量来改写成这样:

  1.    varoFruit = {color:"red",name:"apple"};
posted @ 2007-08-28 19:53  yunhuasheng  阅读(892)  评论(1)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3