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)替换布尔值
考虑下面的例子
-
varbFound=false;
-
for(vari=0;i<aTest.length;i++){
-
if(aTest[i]==vTest){bFound=true;}
-
}
可以替换为:
-
varbFound=0;
-
for(vari=0;iif(aTest[i]==vTest){bFound=1;}
- }
2)缩短否定检测
-
if(oTest!=#ff0000){
-
//do something
-
}
-
if(oTest!=null){
-
//do something
-
}
-
if(oTest!=false){
-
//do something
- }
虽然这些都正确,但用逻辑非操作符来操作也有同样的效果
-
if(!oTest){
-
//do something
-
}
7.使用数组和对象字面量
-
varaTest=newArray;
-
varaTest=[];
第二行用了数组字面量,与第一行效果一样,但要短很多。
类似,对象字面量也可用于节省空间,以下两行效果一行,但对象字面量要更简短
-
varaTest=newObject;
-
varaTest={};
如果要创建具有一些特性的一般对象,也可以使用字面量,如下:
-
varoFruit=newO;
-
oFruit.color="red";
-
oFruit.name="apple";
前面的代码可用对象字面量来改写成这样:
-
varoFruit={color:"red",name:"apple"};
分享到:
相关推荐
NULL 博文链接:https://t240178168.iteye.com/blog/1702269
如何提升JavaScript的运行速度(递归篇)
优化CSS,Javascript代码(Minify+Uglify)以减少带宽占用,提高网页打开速度 教程
V8引擎执行Javascript的速度非常快,性能非常好。 [1] Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和...
如何提升JavaScript的运行速度(函数篇).doc
NULL 博文链接:https://hlee.iteye.com/blog/499130
所以网页前端速度优化的一个重要项目就是:减小资源请求数。 事实上,业界有很有名气的js,css合并压缩开源程序:minify。 但悲剧的 minify 在 php5.3 , php 5.4 环境下无法使用,于是逼的我只好自己丰衣足食。 ...
近年来网站客户端开发规模越来越大并且有很多由AJAX开发的复杂页面, 系统中的客户端脚本大量增加,前端开发就产生了诸如代码量大、组织困难、难 ...把前端优化技术 应用到项目实现中,具体分析了各自的性能优化效果。
但JS不好调试,代码多了也会严重影响速度,当你在为提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,大网站的JS都做了压缩处理。JS的速度分为两种,下载速度和执行速度。要想JS的下载...
如何提升JavaScript的运行速度(循环篇).doc
个是我在网上找的资料,具体的出处,我已经记不清楚了,觉得很不错,就和大家分享了
让你页面速度飞起来 Web前端性能优化 让你页面速度飞起来 Web前端性能优化
在 javascript 控制台上,您可以看到最佳着陆器的得分如何在到达着陆区时从 0 增加到 100,而当他们在安全速度内到达着陆区时增加到 200。超过 200 分,他们会因消耗更少的燃料而获得更多积分。 着陆器根据他们获得...
但JS不好调试,代码多了也会严重影响速度,当你在为提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,大网站的JS都做了压缩处理。JS的速度分为两种,下载速度和执行速度。要想JS的下载...
如何提升JavaScript的运行速度(DOM篇).doc
RequireJS是一个提高你的javascript代码速度和质量的有效方法,同时它还让你的代码更容易阅读和维护。 在本文中,我会为你介绍RequireJS和应该如何使用它。我们讨论引入文件和定义模块,甚至还会接触优化方面的知识...
WordPress 本身以及主题和插件通常需要加载一些 JavaScript 来实现某些特殊功能。为了最大限度地保证兼容性,不至于出现 JavaScript 失效的情况,所以一般在页头加载 JavaScript 文件。... 优化JavaScript的Word
但JS不好调试,代码多了也会严重影响速度,当你在为提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,大网站的JS都做了压缩处理。JS的速度分为两种,下载速度和执行速度。要想JS的下载...
目录: 第1课 第一页 Javascript高级教程 第二页 本教程的课程计划 第三页 一个if-then-else的快捷方式 第四页 什么是变量 第五页 变量的使用方法 ...第六页 按速度优化JavaScript代码 第七页 下面讲什么?