網站性能優化工具-javascript壓縮工具JSMin

本文來源: 核桃博客

本文地址: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等,基本都在下載時提供了經過壓縮的版本。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章