你需要掌握的前端代码性能优化工具

Google Closure Compiler

官网：https://developers.google.com/closure/compiler/

Closure Compiler

的使用方法有如下3种：

在命令行下使用一个google编译好的java程序
使用google提供的在线服务
使用google提供的RESTful API

首先需要下载compiler-latest.zip，由于可能有的用户没法翻墙，所以我把它下载下来放到我的网盘上供大家下载使用。

下载下来之后，进入这个文件所在目录，以我的为例：

$ cd cd /Users/trigkit4/Downloads/

然后解压该文件：

$ unzip compiler-latest.zip -d ~

，会出现如下文件列表：

Archive:  compiler-latest.zip
inflating: /Users/trigkit4/compiler.jar
inflating: /Users/trigkit4/COPYING
inflating: /Users/trigkit4/README.md

然后压缩

compiler.jar

 ，代码如下：

$ java -jar ~/compiler.jar –js my_source.js –js_output_file my_package.js

这样，就把 

my_source.js

压缩成

my_package.js

了。

如果想知道其他的可选参数，可以输入如下命令获得：

$ java -jar ~/compiler.jar –help

使用google提供的在线服务

链接：http://closure-compiler.appspot.com/，这种方法速度比较慢，而且貌似现在已经无法访问了

使用google提供的RESTful API

该方法缺点是无法压缩大文件，

API

文档见http://code.google.com/closure/compiler/docs/api-tutorial1.html 。原理大概就是将需要压缩的

js

内容或

js

文件所在

url

，以及必要的配置信息发送给

google

的服务器，然后接收

google

的响应，响应结果即为压缩后的内容。

CSS Lint

官网：http://csslint.net/

CSSLint

 是一个用来帮你找出 

CSS

 代码中问题的工具，它可做基本的语法检查以及使用一套预设的规则来检查代码中的问题，规则是可以扩展的。

JSHint

JSHint

是一个

JavaScript

的代码质量检查工具，主要用来检查代码质量以及找出一些潜在的代码缺陷。

官网：http://jshint.com/

官方文档：http://jshint.com/docs/

使用方法：进入官网首页，粘贴你的代码，你的错误和不正当的用法就会在右边实时显示了，如你所料，它是英文版本的

本地安装

在终端或者CMD里输入如下命令行，不过前提是你装了

npm

，时间有点长，取决于网络：

npm install jshint

如图所示：

运行JSHint

打开终端或者

cmd

命令窗口，使用

cd

切换到你对应的应用目录下，输入如下命令行：

jshint my_app.js

UglifyJS

UglifyJS

是基于 

NodeJS

 的

Javascript

语法解析/压缩/格式化工具

官网：http://lisperator.net/uglifyjs/

安装

$ npm install uglify-js -g

官方

github

：https://github.com/mishoo/UglifyJS2

在线使用：http://lisperator.net/uglifyjs/#demo

例子

Mac

系统打开终端，

cd

 到

js

文件所在目录，比如：

cd /Volumes/Mac/js

然后输入如下命令进行压缩一个名叫base.js的文件：

trigkit4:js trigkit4$ uglifyjs base.js -o base-min.js
trigkit4:js trigk
d509
it4$ uglifyjs base.js -m -o base.js

-m

参数是把变量名变成

a,
b, c, d

进行替换的

YUI Compressor

YUI Compressor

 压缩 

js

 的内容包括：

移除注释
移除额外的空格
细微优化
标识符替换（Identifier Replacement）

官方github：https://github.com/yui/yuicompressor/

机器需要

Java 1.4

以上的环境，所以需先下载JDK，配置环境。

使用YUI Compressor压缩JS和Css

常用示例（在cmd中执行）

java -jar D:\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar --type js --charset UTF-8 D:\my.js -o D:\my-min.js

java -jar D:\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar --type css --charset UTF-8 D:\my.css -o D:\my-min.css

参数说明：

`–type`指定要打包的文件类型，可选的有 `js`和`css`
`–charset` 指定字符集
`-o` 指定输出的文件名，如果不指定这个参数将会把压缩后的内容输出到命令行上
最后的my.js和my.css是要打包的debug版源文件

使用

YUI Compressor

和

DOS

批处理脚本压缩

JavaScript

和

CSS

，加上

IIS

的

GZIP

，加起来能得到

85%

左右的压缩率。

三个文件：

批处理文件：yuicompressor.bat
注册表文件：yuicompressor.reg
压缩jar包：yuicompressor-2.4.6.jar