Web优化之Javascript Compressor

目的:

web项目前端js的体积大小影响页面性能和用户体验, 压缩js是web优化的一个重要手段。JavaScript的压缩不是为了保护代码而压缩,而是压缩后的js代码文件可以小一倍甚至多倍,从而使这个js代码快速的下载到客户端,特别js文件较大时速度效果非常明显.

方法:

JS优化的方法有以下几个方法:

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

2、js加载的时候合并下载, 可以有效减少请求js产生的网络连接次数。(满足Yahoo!前端优化第一条原则:Minimize HTTP Requests,来减少三路握手和HTTP请求的发送次数。)

3、编写js的时候减少js体积, 通用的方法是js的压缩, 压缩的比例大概是1:2。(主要是去除JS文件里的注释、空白,并且压缩局部变量长度等等)

JS压缩工具和途径:

1、在线压缩:

提供在线压缩的网站有很多,这里推荐http://tools.css-js.com/compressor.html

推荐理由是这个站点里面有四个压缩引擎,一个YUI压缩,一个UglifyJS压缩,一个JSPacker压缩,和一个新的JsMin压缩。可以根据自己需要选择。一般用UglifyJS引擎压缩就可以。jQuery和好些其他的前端项目就是用他压缩的。

 

2、压缩工具:

几款比较主流的压缩内核:

UglifyJS 是用 NodeJS 编写的 JavaScript 压缩工具,是目前最流行的JS压缩工具,JQuery 就是使用此工具压缩,UglifyJS 压缩率高,压缩选项多,并且具有优化代码,格式化代码功能,目前国内能提供UglifyJS压缩的都还处在1.0版本,本站率先升级到 2.0 时代。

YUI compressorJava编写的压缩工具,由雅虎发布,压缩是 100% 的安全,比大多数其他工具有更高的压缩比, 一般代码的压缩率达到 40%60%YUI compressor 也能够压缩CSS文件,国内互联网公司,阿里、淘宝、百度等都是采用 YUI compressor 内核压缩后发布代码。

JSPackerPHP编写的压缩工具,可以混淆代码保护知识产权,产生的代码兼容IE、FireFox等常用浏览器,国内大部分在线工具网站都采用这种算法压缩,只因为此算法采用PHP编写,正则表达式替换语句,没有语法分析内核,环境搭建成本低,压缩率上远不如以上两种内核,并且混淆代码页不符合开源精神。

JsMin 是用C语言编写的一个轻量级JS压缩器,去除JavaScript文件中的注释和不必要的空格。它通常减少了一半的文件大小,从而导致更快的下载速度。

对于其他压缩内核比如 Google Closure Compiler 根据反馈,由于压缩出错率太高,并且不是主流压缩内核,本站不再支持。

Google Closure Compiler
https://developers.google.com/closure/compiler/

Closure Compiler是一个JavaScript优化器,将Web应用编译成压缩的、高性能的JavaScript代码。编译器去除无效代码,并将剩余代码重写并压缩,使Web应用能够快速在浏览器的JavaScript引擎上执行。这个工具在Google的Gmail,Google文档和Google地图中都有使用。Google希望这个工具的开源能够对Web开发社区有所帮助。

Javascript Obfuscator 是js压缩和混淆工具,可以通过这里下载试用版:http://www.javascript-source.com/

这里推荐:YUI Compressor
http://developer.yahoo.com/yui/compressor/

YUI Compressor可以很好的集成到ant中,ant编译的脚本如下:

<property name="yuicompressor.path" location="yuicompressor-2.4.8.jar"/> 

<target name="compres-js-css" description="Compress js and css file">
	    <echo>${ant.project.name} Compress js and css file</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> 

JS编码建议:

把JS文件用匿名函数的方式封装起来,对外只给一个接口。这样JS压缩引擎就可以把你匿名函数中不对外开放的内部变量名称都给替换成a,b,c,d这样的单字符,很能节省体积。
时间: 2024-09-26 15:56:01

Web优化之Javascript Compressor的相关文章

Web优化之YaHoo Web优化的14条法则

Yahoo Web优化建议原文:Best Practices for Speeding Up Your Web Site Web应用性能优化黄金法则:先优化前端程序(front-end)的性能,因为这是80%或以上的最终用户响应时间的花费所在. 法则1. 减少HTTP请求次数 80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素,如图像.样式表.脚本和Flash等,的下载上.减少页面元素将会减少HTTP请求次数.这是快速显示页面的关键所在. 一种减少页面元素个数的方法是简化页

[HTML] 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能

在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服务器,调用sns等功能,移动手机WEB页面(HTML5)Javascript提供的接口是一个好办法. 采用url链接的方式,实现在Safari ios,香港服务器,Android 浏览器,webos 浏览器,塞班浏览器,IE,Operamini等主流浏览器,进行拨打电话功能. 1.最常用WEB页面J

web前端之JavaScript正则表达式

web前端之JavaScript正则表达式 后面有代码: \d 表示数字 \d? ?表示0个或者一个 \d+ +表示一个或者多个 \d{3} 表示三个 \d{3,5} 表示三到五个 \d{3,} 表示至少出现3次 \d* *表示0到任意个 \b 表示单词边界 \B 表示非单词边界 \bis\b 表示查找" is "的 . 表示任意字符 \ 表示转译 http:(\/\/.+\.jpg) 用()进行分组 $1 获取其内部东西 []表示或 ^表示开头 $表示结尾 g表示全局 \d{4}[/

转:Web优化 及常用工具包

Web优化: 减少http请求 避免404错误 在html页面header加入缓存标签 Gzip压缩网页 减少cookie体积 使用外部的js和css 消减js和css 压缩js 使用css sprites技术,众多图片合成在一起,通过CSS切分,降低图片传输的频率和数据量 可以使用静态网页的,避免使用动态网页 工具包 进程管理器,CPU,内存,I/O 日志:IIS日志,windows日志,系统本身日志 使用dotTrace,跟踪方法执行时间,找出速度慢的方法,针对性优化 Sql Profile

web前端之JavaScript高级程序设计六:事件

web前端之JavaScript高级程序设计六:事件 JavaScript 与 HTML 之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(JavaScript 代码)与页面的外观(HTML 和 CSS 代码)之间的松散耦合. 事件流: 事件流描述的是从页面中接收事件的顺序.但有意思的是, IE 和 Netscape 开发团队居然提出了

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

一.js阻塞特性 JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的. 即<script>每次出现都会让页面等待脚本的解析和执行(不论JS是内嵌的还是外链的),JS代码执行完成后,才继续渲染页面. 二.优化方案 1.尽管脚本的下载过程并不会相互影响,但页面仍然必须等待所有JS下载并执行完成才能继续.所以尽可能将所有<script>标签放置在页面底部,紧靠关闭标签</body>的上方.此方法可以保证页面在脚本运

YaHoo Web优化的14条法则

Web应用性能优化黄金法则:先优化前端程序(front-end)的性能,因为这是80%或以上的最终用户响应时间的花费所在. 法则1. 减少HTTP请求次数 80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素,如图像.样式表.脚本和Flash等,的下载上.减少页面元素将会减少HTTP请求次数.这是快速显示页面的关键所在. 一种减少页面元素个数的方法是简化页面设计.但是否存在其他方式,能做到既有丰富内容,又能获得快速响应时间呢?以下是这样一些技术: Image maps组合多个

关于web优化(一)

我们所说的web,无非就是html,css(web font, image),JavaScript. HTML优化建议: 1. 尽量不要用table进行布局. 2. 尽量用最新的带有语义的h5标签,这样在解析跟渲染时更快. 3. 使用块传输数据,web服务器响应头设置:Transfer-Encoding: chunked 4. 预处理DNS,DNS缓存.可以通过link标签增加rel=“dns-prefetch”,如:<link rel="dns-prefetch" href=&

[转载]网站前端性能优化之javascript和css——网站性能优化

之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示. 注重性能的前端服务器往往希望页面有秩序地加载.同时,我们也希望浏览器把已经接收到内容尽可能显示出来.这对于拥有较多内容的页面和网速较慢的用户来说特