您的位置:首页 > 运维架构 > 网站架构

网站性能优化工具-javascript压缩工具JSMin

2010-09-10 08:26 323 查看
本文来源: 核桃博客

本文地址:http://www.hetaoblog.com/%E7%BD%91%E7%AB%99%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E5%B7%A5%E5%85%B7-javascript%E5%8E%8B%E7%BC%A9%E5%B7%A5%E5%85%B7jsmin/

性能测试工具-利用FireBug做前端性能测试

文中已经提到前端性能对最终用户的体验,之前也介绍了网站性能优化
工具-无损图片压缩

工具Smush.it
作为图片压缩工具,这里,再介绍另外一款js压缩工具,JSMin,可以对网站中大量使用的
javascript进行压缩;

由于通常网站开发过程中会引入大量的js文件,包括库文件和自己写的大量js,js文件的数量和大小通常也对网站的性能产生了较大的影响。对js文
件进行压缩可以减少js文件的大小,提高网站的性能。当然,另外一个影响就是在生产环境下的js文件是经过压缩的,如果有啥js问题,调试起来会更加麻
烦。

JSMin
的基本
原理是去除javascript中的空格、回车、注释,作为javascript压缩工具,JSMin没有做混淆。混淆是指进一步的压缩,通常的做法是将
较长的变量名和函数名替换成更短的。通常而言,在压缩基础上进一步混淆的改进不是那么明显,而且由于混淆的复杂性,有可能会带来一些错误,所以,如果不是
为了抵制逆向工程,通常建议做压缩就够了。

1.使用方法:
下载JSMin
后,,
假设原始文件为before.js,那么输入如下命令后,就得到after.js

在命令行下输入jsmin <before.js> after.js

2.注意
a. JSMin建议js文件是以ASCII或者UTF-8的编码方式保存的。其他方式的js文件处理后有可能会带来问题

b. JSMin不是可逆的,需要保存要原始文件;另外一个方面,一些模糊的表达式,有可能会在去除空格后发生错误,比如a + ++b

缩后会变成a+++b,然后被解析成a++ + b,所以,建议在之前先使用
JSLint

检查下Javascript文件,

3.例子
未压缩代码:

// is.js

// (c) 2001 Douglas Crockford

// 2001 June 3

// is

// The -is- object is used to identify the browser. Every browser
edition

// identifies itself, but there is no standard way of doing it, and
some of

// the identification is deceptive. This is because the authors of
web

// browsers are liars. For example, Microsoft’s IE browsers claim to
be

// Mozilla 4. Netscape 6 claims to be version 5.

var is = {

ie: navigator.appName == ‘Microsoft Internet Explorer’,

java: navigator.javaEnabled(),

ns: navigator.appName == ‘Netscape’,

ua: navigator.userAgent.toLowerCase(),

version: parseFloat(navigator.appVersion.substr(21)) ||

parseFloat(navigator.appVersion),

win: navigator.platform == ‘Win32′

}

is.mac = is.ua.indexOf(‘mac’) >= 0;

if (is.ua.indexOf(‘opera’) >= 0) {

is.ie = is.ns = false;

is.opera = true;

}

if (is.ua.indexOf(‘gecko’) >= 0) {

is.ie = is.ns = false;

is.gecko = true;

}

压缩后的代码:

var is={ie:navigator.appName==’Microsoft Internet
Explorer’,java:navigator.javaEnabled(),ns:navigator.appName==’Netscape’,ua:navigator.userAgent.

toLowerCase(),version:parseFloat(navigator.appVersion.substr(21))||parseFloat(navigator.appVersion),

win:navigator.platform==’Win32′}

is.mac=is.ua.indexOf(‘mac’)>=0;if(is.ua.indexOf(‘opera’)>=0){is.ie=is.ns=false;is.opera=true;}

if(is.ua.indexOf(‘gecko’)>=0){is.ie=is.ns=false;is.gecko=true;}

4.效果
当js文件较多较大时,压缩的改进是较大的;

现在主流的js框架,比如JQuery等,基本都在下载时提供了经过压缩的版本。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: