`

网站优化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)替换布尔值
  考虑下面的例子

 varbFound=false;
 for(var i=0;i<aTest.length;i++){
   if(aTest[i]==vTest) {bFound=true;}
 }
 
  可以替换为: 

 varbFound=0;
 for(var i=0;i    if(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 = new Array;
   var aTest =[];
 
第二行用了数组字面量,与第一行效果一样,但要短很多。

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

   varaTest = new Object;
   var aTest ={}; 
 如果要创建具有一些特性的一般对象,也可以使用字面量,如下:

   varoFruit = new O;
   oFruit.color="red";
   oFruit.name="apple";  
  前面的代码可用对象字面量来改写成这样:

   varoFruit = {color:"red",name:"apple"};


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/lastsweetop/archive/2009/06/26/4301566.aspx

分享到:
评论

相关推荐

    javascript压缩专家-绿色软件

    但JS不好调试,代码多了也会严重影响速度,当你在为提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,大网站的JS都做了压缩处理。JS的速度分为两种,下载速度和执行速度。要想JS的下载...

    基于JavaScript的WebGIS前端开发及优化

    近年来网站客户端开发规模越来越大并且有很多由AJAX开发的复杂页面, 系统中的客户端脚本大量增加,前端开发就产生了诸如代码量大、组织困难、难 以维护、代码复用低、扩展适应性差等此类的问题。究其原因,以往前端...

    Javascript/CSS 多文件代码合并、安全压缩、优化(PHP版)

    所以网页前端速度优化的一个重要项目就是:减小资源请求数。 事实上,业界有很有名气的js,css合并压缩开源程序:minify。 但悲剧的 minify 在 php5.3 , php 5.4 环境下无法使用,于是逼的我只好自己丰衣足食。 ...

    javascript压缩工具

    但JS不好调试,代码多了也会严重影响速度,当你在为提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,大网站的JS都做了压缩处理。JS的速度分为两种,下载速度和执行速度。要想JS的下载...

    基于PHP MediPro汽车门户网站系统的毕业设计,采用PHP、MySQL等技术,并利用HTML、CSS、JavaScript

    4. 技术性能:我们将优化网站的技术性能,保证网站的稳定性和响应速度。 在开发过程中,我们将采用PHP、MySQL等技术,并利用HTML、CSS、JavaScript等前端技术进行网站的界面设计。我们将注重代码的可维护性和可扩展...

    JavaScript 代码压缩加密软件

    但JS不好调试,代码多了也会严重影响速度,当你在为提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,大网站的JS都做了压缩处理。JS的速度分为两种,下载速度和执行速度。要想JS的下载...

    《高性能网站建设指南》-- 想网站打开速度快,必看。

    《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...

    雅虎最佳实践之加速网站速度法则

    1. 前端页面优化 1.1. 雅虎最佳实践之加速网站速度法则 1.1.1. 减少HTTP请求次数 1.1.2 等等 1.2. Javascript语言效率 2. 后台代码优化 等

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

    随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术。而现在Ajax则是最为流行的一种方式。JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,...

    JavaScript脚本性能的优化方法

    From:http://www.nirvanastudio.org/javascript/improve-javascript-performance.html 作者:ShiningRay @ Nirvana Studio 随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术。...

    网站性能优化的34条黄金守则

    Yahoo!的Exceptional Performance团队为改善Web性能... Excetional Performance团队怪结出了一系列可以提高网站速度的方法。可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图片、秱劢应用等七部分。

    【JavaScript源代码】Vue包大小优化的实现(从1.72M到94K).docx

     最近做了一个网站,uidea,是用来辅助独立开发者做一些 UI 设计的,当时只管开发,等部署完以后,发现访问速度堪忧 毕竟是个小水管服务器,相比提高带宽,还是先看看代码上能不能优化一下,性价比更高 这个是优化...

    基于PHP WordPress英文网站(带27000文章数据)-wp的毕业设计,缓存机制、图片优化、CSS和JS文件压缩以及安装

    本毕设项目的目标是,通过优化WordPress网站的性能,提高网站的响应速度和用户体验。具体目标如下: - 通过缓存机制减少数据库访问次数 - 对图片进行优化,减少加载时间 - 对CSS和JS文件进行压缩,减少加载时间 - ...

    高性能网站建设指南2 中文版 高性能网站建设指南(中文版)

     《高性能网站建设指南》一书介绍了如何针对网站中的Ajax、CSS、JavaScript、Flash和图片进行性能优化。每个性能规则都提供了示例,在本书的配套网站上可以找到代码片段。这些规则包括:  •减少HTTP请求 •使用...

    HTML代码优化原理与技巧

    本书介绍了70多种有关优化网页HTML代码的原理与技巧,内容涉及HTML、图像、多媒体、表格、报头、网址、JavaScript、CSS、网站等十个方面的优化问题。相信读者能够利用这些技巧,减少网页的字节数,提高网页的显示...

    网站性能优化(yahoo)

    Yahoo!的Exceptional Performance团队为改善Web性能...Excetional Performance团队总结出了一系列可以提高网站速度的方法。可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。

    GoMikeDesigns:优化网站的大小和速度,提高可访问性和 SEO :check_mark::bullseye::rocket:

    优化现有网站 我优化前的报告评分截图 我优化后的报告评分截图 我做了什么! 关键词 删除 Google 不再使用的关键字元标记 内容和关键字隐藏在 div 标签中,应删除 替代文本 该网站使用三个单独的图像来呈现内容。...

    js压缩专家

    但JS不好调试,代码多了也会严重影响速度,当你在为提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,大网站的JS都做了压缩处理。JS的速度分为两种,下载速度和执行速度。要想JS的下载...

    JavaScript性能优化之小知识总结

    随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术。而现在Ajax则是最为流行的一种方式。JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,...

    PHP网站基础优化方法小结

     使用该代码后服务器会压缩所有需要传送到客户端的代码,并在浏览器中进行解压,从而使网站运行速度加快。这一功能还可以节省网站空间的流量。 2、不要滥用Javascript和Ajax  只在需要的时候才使用Javascript和...

Global site tag (gtag.js) - Google Analytics