优化JavaScript 之下载时间

最新推荐文章于 2020-10-12 14:23:14 发布

gxl_ct001

最新推荐文章于 2020-10-12 14:23:14 发布

阅读量234

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javaScript 优化 ViewUI

本文链接：https://blog.youkuaiyun.com/gxl_ct001/article/details/84368493

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍减少JavaScript文件大小的技巧，包括删除注释、制表符和空格、换行及替换变量名等方法，旨在提高网页加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文摘录自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外，再进行变量名替换