zoukankan      html  css  js  c++  java
  • js 压缩和格式化(方便阅读)

    Ajax除了自己要写js代码外,同样也免不了要使用其它第三方js库。当你在为提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,比如微软的live,其中的js做了压缩处理。JS的速度分为两种,下载速度和执行速度。今天就先来说说下载速度。要想js的下载速度快,就需要尽量减小js文件的大小。这里我们可以使用一个工具ESC(ECMAScript cruncher)来帮我们完成这个工作,不过这个工具只能在Windows下使用。到http://www.saltstorm.net/depo/esc/introduction.wbm?pod=js下载ESC.zip,解压后看看它的帮助文档。很简单。

    压缩级别分为5种,从0到4

    Level 0 :: No compression

    Level 1 :: Comment removal

    Level 2 :: Whitespace removal

    Level 3 :: Newline removal

    Level 4 :: Variable substitution

    在WINDOWS命令行下执行

    cscript ESC.wsf -ow menu2.js menu.js将会把menu.js按照级别2来压缩(默认级别为2)为menu2.js

    cscript ESC.wsf -l 3 -ow menu3.js menu.js将会把menu.js按照级别3来压缩为menu3.js

    需要注意的是,级别4会把变量名修改,如果你的js中用到了全局变量或者类的话,就不能使用该级别了,否则其它使用你的js的文件可能会无法正常运行。

    试了一下,把yui的menu.js压缩了一下,对应的级别和压缩率分别如下:

    级别1:压缩率44.41%

    级别2:压缩率62.82%

    级别1:压缩率64.93%

    原来130多K的文件压缩后也就40多K,看来还是挺有用处的。


    另外还有一个小工具jsmin也可以压缩,不过没有ESC的level选项,看了一下好像压缩效果类似于ESC的level3.济南大学的一些老师写了个jsmin的图形界面程序JsMinGUI,使用起来更加方便。:-)

    Dojo项目组也提供了一个工具,shrinksafe可以通过http://alex.dojotoolkit.org/shrinksafe/在线的上传要压缩的文件,处理完毕后可以保存到本地,另外shrinksafe还提供了一个本地运行的版本,需要jre1.4的支持。

    ps:对于一些压缩的代码,在阅读时可以用JavaScript Code Improver来进行格式化。看看它主页上的一个例子:

    原来的代码:

    <script language="JavaScript">var i=0,s="",k=0;function foo(){for(j=0;j<10;j++){for(i=0;i<10;i++){s="string1";k=Math.floor(Math.random()*10);}for(i=20;i>9;i--){s="string2";k=i;}}}</script>

    格式化后:

    <script language="JavaScript">
    var i = 0, s = "", k = 0;
    function foo()
    {
    for(j = 0; j < 10; j++)
    {
    for(i = 0; i < 10; i++)
    {
    s = "string1";
    k = Math.floor( Math.random()*10 );
    }
    for(i = 20; i > 9; i--)
    {
    s = "string2";
    k = i;
    }
    }
    }
    </script>


    纠正错误,欢迎探讨:
    打开微信-发现-扫一扫
  • 相关阅读:
    Python 正则表达式匹配两个指定字符串中间的内容
    Switch Case 和 If Else
    MYSQL LETT/RIGHT/INNER/FUll JOIN 注意事项
    MYSQL 批处理 Packet for query is too large
    Junit单元测试不支持多线程
    postman中 form-data、x-www-form-urlencoded、raw、binary的区别
    一个项目中:只能存在一个 WebMvcConfigurationSupport (添加swagger坑)
    Nginx 转发特点URL到指定服务
    基于UDP协议的程序设计
    TcpClient类与TcpListener类
  • 原文地址:https://www.cnblogs.com/backuper/p/1492942.html
Copyright © 2011-2022 走看看