js压缩

本文介绍几种提高Web端JS加载效率的方法,包括Tomcat的GZIP压缩、合并JS文件以减少网络请求及通过工具压缩JS体积。重点讲解如何使用Yahoo的yuicompressor进行JS压缩。

js压缩

web端的开发js的体积给客户端带来很大的困扰, 特别网络速度慢的时候, js的加载影响效率的一个重要的方面。

加快js加载的以下几个方法:


1、tomcat的压缩, gzip压缩启用的情况下, 压缩的比例大概是1:6

2、js加载的时候合并下载, 这样可以有效减少为了请求js而产生的网络连接次数, 对于宝贵的网络资源这个是一个重要手段

3、编写js的时候减少js体积, 通用的方法是js的压缩, 压缩的比例大概是1:2


这里重要的说说js的压缩。使用情况比较多的方法有2个,

 一个是google

的压缩工具, 一个是yahoo的压缩工具, 其中前者偏重于js的优化。 后者主要是针对js的压缩

使用ant编译的脚本如下:

<property name="yuicompressor.path" location="yuicompressor-2.4.2.jar"/>
<target name="compres-js-css" description="压缩 js css 文件">  
	    <echo>${ant.project.name} 压缩 js css 文件</echo>
        <apply executable="java" dest="${webapps.dir}">
            <fileset dir="${src.web.dir}">
				<include Name="**/*.js"/>								
            </fileset>
            <arg line="-jar"/>
            <arg path="${yuicompressor.path}"/>
            <arg value="-o"/>
            <targetfile/>
            <mapper type="glob" from="*.js" to="*-min.js"/>
        </apply>
    </target> 


其中yuicompressor 文件是(郁闷, 这个地方怎么上传文件。 如果可以上传文件的话, 就可以直接下载了。)



为何要压缩JS代码: 随着Ajax的应用普及,JavaScript已经得到了越来越多程序员的重视。但JS不好调试,代码多了也会严重影响速度,当你在为提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,大网站的JS都做了压缩处理。JS的速度分为两种,下载速度和执行速度。要想JS的下载速度快,就需要尽量减少js文件的大小,另外,把多个js文件合并成一个也能因为减少服务器的响应次数而加快网页下载。 此外,很多程序辛辛苦苦的写出来的javascript代码却被别人随意的剽窃,实为憾事。本软件还可以通过对javascript的变量名称和过程名称进行编码,从而起到混淆ja代码的作用,保护您的劳动成功。 JS代码压缩,基本原理为: 1. 压缩多余的空格和换行符 2. 删除注释,因为注释只对程序员有用而对于浏览网页的最终用户是无用的,删除了可以缩小文件体积 3. 把较长的变量名称和过程名称统一替换为很短的名称,一者可以减小体积,二者还可以减小程序的可读性保护自己的劳动成功。 JS代码压缩工具: 现有的JS代码压缩工具都是网页版的,例如ESC,shrinksafe等,他们都是在网页上用js本身实现对代码的压缩。由于网页的局限性,很难很好的管理压缩任务。聚问网络开发的js压缩专家(JsPacker)v1.0 是同功能的桌面程序,并且是绿色软件,使用起来更加方便。 软件名称:js压缩专家 v1.0 (英文名称:JsPacker) 软件简介:可以高效的压缩Javascript脚本文件缩短网页显示时间,可以混淆代码保护知识产权,还可以把多个文件合并压缩。产生的代码兼容IE,FireFox等常用浏览器。本软件可免费使用和转载,但严禁用于商业用途。 本软件不同于网络上已有的同类软件,现有的都是网页版的,本软件是完全的绿色软件,下载后直接运行即可,界面很简单。包括压缩率选项,压缩文件设置,压缩文件管理,js压缩结果预览等。 软件大小:296KB
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值