`

优化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速度优化

    为了提供更好的用户体验,JavaScript性能优化至关重要。本文将深入探讨"前台JavaScript速度优化"的相关知识点,包括但不限于代码优化策略、工具应用以及Ajax性能提升。 一、代码优化策略 1. 减少DOM操作:频繁的...

    Javascript 性能优化的一点技巧

    随着Web应用的日益复杂,JavaScript作为前端开发的核心语言之一,其运行效率直接影响着用户体验与整体性能。因此,掌握一定的JavaScript性能优化技巧对于提升应用程序性能至关重要。本文将深入探讨一些JavaScript...

    javascript:时间空间

    总的来说,理解JavaScript的时间和空间效率,通过优化循环、函数调用、内存管理和利用工具,可以有效地提升代码的性能,为用户提供更流畅的体验。在实际开发中,平衡时间和空间效率,根据应用场景选择合适的优化策略...

    javascript各种特效下载

    本文将围绕“javascript各种特效下载”这一主题,深入探讨JavaScript实现的各种特效及其背后的原理。 首先,我们要了解JavaScript特效的基础,那就是DOM(Document Object Model)操作。DOM是HTML和XML文档的结构化...

    JavaScript特效打包下载

    这个"JavaScript特效打包下载"包含了多种不同类型的特效,如页面特效、窗口特效、div层处理以及文字特效等,这些都是网页设计师常用且必备的工具。 首先,我们来详细了解JavaScript在网页特效中的应用。JavaScript...

    JavaScript语言精粹(高清电子版)和高性能JavaScript 双语版

    这本书的重点在于优化JavaScript代码的性能,确保应用程序的高效运行。书中可能包含以下知识点: 1. **性能分析**:如何使用开发者工具进行性能测试,识别瓶颈并进行优化。 2. **数据结构和算法**:选择合适的数据...

    arcgis api for javascript 4.6下载

    1. **增强的性能**:4.6版本优化了地图渲染速度和加载时间,尤其在处理大量图层和复杂地理数据时,表现更为出色。 2. **无障碍功能**:对无障碍功能的支持进一步加强,使视觉障碍用户也能通过屏幕阅读器轻松使用地图...

    JavaScript 程序开发手册下载

    JavaScript的开发工具有Node.js,它让JavaScript可以用于服务器端编程,提供了一整套开发工具链,如Gulp、Grunt和Webpack用于构建优化,npm(Node Package Manager)则管理着大量的开源库和工具。 总的来说,...

    JavaScript参考手册

    9. **性能优化**:手册可能还会包含一些性能最佳实践,如减少DOM操作、使用闭包优化内存、避免全局变量等,帮助开发者写出高效的代码。 10. **安全注意事项**:JavaScript的安全性也是重要的话题,手册可能会涵盖跨...

    TimelineJS基于JavaScript的故事时间线

    **TimelineJS:JavaScript的故事时间线** TimelineJS是一个强大的开源库,专为创建视觉吸引人的、交互式的时间线而设计。这个库充分利用了JavaScript语言的灵活性和动态性,为Web开发者提供了一种简单的方法来构建...

    JavaScript代码优化一例.pdf

    早期由于机器内存资源的限制,算法研究者对空间和时间的优化给予同样的重视。现在,由于机器内存资源相对充裕,算法(代码)的优化,更多地集中于运行时长上,对JavaScript代碼而言,更是如此。 三、JavaScript代码...

    [高性能JavaScript编程].(High.Performance.JavaScript).Nicholas.C.Zakas.文字版

    公司的高级前端工程师,他在书中分享了大量实战经验与技巧,帮助读者优化JavaScript性能,提升网页的加载速度和运行效率。 首先,书中讲述了JavaScript代码的加载与执行,这是性能优化的第一步。作者强调了脚本的...

    javascript

    3. date_time.html:这是一个HTML文件,可能包含了JavaScript代码用于处理日期和时间的选择和显示,这可能涉及到JavaScript的Date对象,以及如何在HTML页面中动态更新内容。 4. date.htc:与label_input.htc类似,...

    基于JavaScript的数字时钟

    在这个场景中,我们讨论的是一个用JavaScript实现的数字时钟,它旨在实时显示当前时间,并且针对不同的浏览器(如Internet Explorer和Firefox)进行了兼容性优化。 首先,让我们深入了解一下JavaScript数字时钟的...

    实用、常用javascript教程+实例 打包下载

    JavaScript语法基于ECMAScript规范,新版本的发布(如ES6、ES7等)不断引入新的特性和优化,使其更加现代化和高效。 教程中可能涵盖的基础知识点包括: 1. 变量和数据类型:JavaScript支持基本数据类型(如字符串、...

    JavaScript检查器和优化器.zip

    JavaScript检查器和优化器是开发高效前端应用的关键工具。它们帮助开发者分析代码性能,查找潜在问题,并通过自动化过程提升代码的运行效率。在JavaScript的世界里,优化代码对于提高页面加载速度、减少内存消耗以及...

    javascript12

    7. **性能优化**:学习如何避免全局作用域污染、减少DOM操作、利用闭包等技巧来优化JavaScript代码的执行效率。 8. **错误处理**:理解和使用try...catch语句,以及如何创建自定义错误类型,是编写健壮代码的关键。...

Global site tag (gtag.js) - Google Analytics