`

优化JavaScript 之下载时间

阅读更多

     本文摘录自Nicholas C. Zakas 的《Professional JavaScript for Web Developers》(《JavaScript 高级程序设计》)为自己做一些记录,也为了分享。

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

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

      在JavaScript文件中,每个字符都是一个字节。因此,每个额外的字符(不管是变量名,函数名,或者注释)都会影响下载速度。部署任何JavaScript代码之前,都应该尽可能地优化下载速度。下面是一些可以用来减少脚本大小的方法。

 

    1.删除注释

      脚本中的任何注释都应该在部署之前删除。进行开发时,注释十分重要,它可以帮助小组成员来理解代码。但是‘要部署时,注释会明显使JavaScript代码体积变大。

     删除注释是缩减JavaScript文件大小最方便的途径。即使不使用下面的建议,仅这一条就可以对缩减文件尺寸产生极大的效果了。


    2.删除制表符和空格

      程序员都会有规则地缩进代码以增加其可阅读性。但是浏览器不需要这些额外的制表符和空格:所以最好删除它们。也不要忘记函数参数、赋值语句以及比较操作之间的空格:

      function doSomething  (  arg1,  arg2,  arg3  )  {  alert( arg1 +  arg2 + arg3 ); }

 

      function doSomething(arg1,arg2,arg3){alert(arg1+arg2+arg3);}

      对于JavaScript解释程序来说,这两行完全一样,虽然第一行比第二行多了12个字节。删除参数、括号和其他语言分隔符之间的空格也可以有效地减少文件的整体大小,这样就缩短了下载时间。

      (注意:要在每行的结束使用分号,将有助于保持代码的语法含义。)

 

     3.删除所有的换行

      只要你在程序的每行的结尾都正确地添加了分号,就不需要任何换行符了。关于JavaScript中换行是否应该存在的思考,底线都是换行要增加代码的可读性。将其删除也是一种最简便的使代码可以对抗反向工程的方法。

      如果出于某种原因而不要删除换行,则要保证文件是Unix格式的,而非Windows格式的。Windows用两个字符表示新行(回车和新行,ASCII代码分别为13和10);而Unix仅适用一个。所以,将换行法从Windows格式转换成Unix格式也可以节约一些字节数。

 

      4.替换变量名

      基本思想是所有的变量名(或者对象的私有特性)都应该被替换成无意义的变量名。毕竟变量的名称对解释程序来说毫无意义、只是对阅读代码的开发人员来说有意义。不过,部署字符串时,应该讲描述性的变量名替换成更简单,更短的名称:

 

      function doSomething(sName,sAge,sCity){alert(sName+sAge+sCity); }

 

      function doSomething(a1,a2,a3){alert(a1+a2+a3);}

      替换变量名后减少了16字节。

     不推荐使用文本编辑器一般的查找替换方法,例如 替换 on 有可能会将 function 结尾的on也替换了。


      5.ECMAScript Cruncher

      为 JavaScript 进行最小化和变量名替换的最佳工具之一是 Thomas Loo 开发的 ECMAScript Cruncher (ESC, 可在 http://down.chinaz.com/soft/22921.htm下载)。 ESC是一个小巧的Windows Shell脚本,可以替你完成以上提到的又换操作。

 

      要运行ESC必须是Windows操作系统。下载后进到目录里,直接点ESC.wsf,会跳到控制台.

      合并:cscript ESC.wsf -l [0] -ow EndFile.js startFile1.js startfile2.js ...
      //Crmhf说:EndFile是合并后的文件名,startFile1和startfile2等是合并前的文件名

      cscript ESC.wsf -l [1-4] -ow EndFile.js startFile.js
      //Crmhf说:按1~4个级别对Javascript进行处理


     ESC支持的4个压缩等级:
     0  不改变脚本。要将多个文件合并到单个文件时候用到
     1  删除所有的注释
     2  除了等级1外,再删除而外的制表符和空格
     3  除了等级2外,再删除换行
     4  除了等级3外,再进行变量名替换

 

  • ESC.zip (56.2 KB)
  • 下载次数: 0
分享到:
评论

相关推荐

    浅谈 Javascript 性能优化.ppt

    优化 JavaScript 性能,使它运行足够快 一个关键因素:运行的时间 管理作用域 操作数据 流控制 Reflow DOM操作 长时间运行的脚本处理

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

    本程序只是合并、压缩,直接讲合并结果发送客户端,并采用修改过期时间优化效率,最大限度减小服务器压力。 这样做法的效率就非常非常接近于 minify。 本程序碎玉压缩合并的功能俱全,但是整体及其轻量级,很容易...

    javascript写的windows资源管理器

    因为时间的关系只提供了局部份功能,还有很多代码和函数都没有进行优化,(注释也较少)比如错误处理,浏览器嗅探等。 这里需要说明的是很少用到了innerHTML和innerTEXT两个方法,这是微软提供的专利方法,还没有...

    JavaScript项目优化总结

    前端时间对公司已有项目JavaScript代码进行优化,本文的是对优化工作的一个总结,拿出来与大家分享。当然我的优化方式可能并不是最优的,或者说有些不对的地方,请指教。JavaScript优化总结分为以下几点优化前后对比...

    用javascript绘制的图表

    前端时间领导要做个demo需要绘制曲线图柱状图这些东西,要动态生成。我尝试着用javascript写了一下,后来才发现远没有我想象的简单,浏览器的兼容性能累死人的,出来的效果也不是很理想。后来让领导否据掉了,不能用...

    javascript压缩工具

    软件简介:可以高效的压缩Javascript脚本文件缩短网页显示时间,可以混淆代码保护知识产权,还可以把多个文件合并压缩。产生的代码兼容IE,FireFox等常用浏览器。本软件可免费使用和转载,但严禁用于商业用途。 本...

    javascript超强的时间控制

    优化了速度和内存占用 2.增加realValue 的格式设置 3.增强日期范围限制 可以使用#year# #month# #day# #lastDay# 如:本月最后一天#year#-#month#-#lastDay# 明年今天(注意有运算的地方,比如+1,必须用{}) : {#year#+1...

    JavaScript优化专题之Loading and Execution加载和运行

    JavaScript 在浏览器中的性能,可认为是开发者所要面对的最重要的可用性问题。此问题因JavaScript的阻塞特征而复杂...不论实际的JavaScript 代码是内联的还是包含在一个不相干的外部文件中,页面下载和解析过程必须停下

    JavaScript性能优化

    对于js来说,刚使用的人上手可能很快,时间长了你会觉得它其中的奥妙,从而也就会注意它的执行效率,一些在工作常见的总结了一下,有什么错误还请大家指出。

    JavaScript性能优化总结之加载与执行

    JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或 JavaScript 的命名空间,它们对后面页面内容造成影响。一个典型的例子就是...

    javascript定时器取消定时器及优化方法

    javascript定时器取消定时器及js定时器优化方法 通常用的方法: 启动定时器: window.setInterval(Method,Time) Method是定时调用的js方法 Time是间隔时间,单位是毫秒 取消定时器: clearInterval(Method);...

    JavaScript 代码压缩加密软件

    软件简介:可以高效的压缩Javascript脚本文件缩短网页显示时间,可以混淆代码保护知识产权,还可以把多个文件合并压缩。产生的代码兼容IE,FireFox等常用浏览器。本软件可免费使用和转载,但严禁用于商业用途。 本...

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

    这个是优化前的包大小,这家伙都上 1.72 M 了,小水管加载时间直接往 3s 以上走了,臣妾扛不住啊 二、目标  这必须得优化一下,优化前得大致定一下目标,目标又需要指标来衡量,所以定了两个指标:  页面加载...

    基于Javascript的通用课程预约微信小程序设计源码

    系统设计旨在为各类培训机构、早教机构和特长培训班提供一个便捷、高效的课程预约解决方案,支持学员自由选择培训上课时间,优化资源调配,减少学员等待时间,提升学员满意度。本小程序包含前后端完整代码,并集成了...

    前端性能优化知识图谱指导

    JS性能优化是指在JavaScript代码的编写和执行过程中,通过一系列的优化策略和技术手段,提高代码的执行效率和性能,从而提升网页或应用程序的响应速度和用户体验。 优化JS性能的方法包括但不限于以下几个方面: 代码...

    JavaScript / html / CSS 在线:美化、优化、加密、解密、压缩、解压

    前端开发有时候复制别人的代码没有格式化,阅读起来很困难,自己格式化需要一点点的调,很浪费时间。本软件本地打开可以格式化、压缩、解压JavaScript/html/CSS代码,很方便,大大提高了开发效率。

    JavaScript中的无阻塞加载性能优化方案

    Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题...不论实际的 JavaScript 代码是内联的还是包含在一个不相干的外部文件中,页面下载和解析过程必须停下,等待脚本 完成这些处理,然后才能继

    JavaScript中对循环语句的优化技巧深入探讨

    而循环也正是程序优化中非常让人头疼的一环,我们往往需要不断去优化程序的复杂度,却因循环而纠结在时间复杂度和空间复杂度之间的抉择。 在 javascript 中,有3种原生循环,for () {}, while () {}和do {} while ...

    用javascript写的windows资源管理器

    因为时间的关系只提供了局部份功能,还有很多代码和函数都没有进行优化,(注释也较少)比如错误处理,浏览器嗅探等。 这里需要说明的是很少用到了innerHTML和innerTEXT两个方法,这是微软提供的专利方法,还...

Global site tag (gtag.js) - Google Analytics