性能测试YSLOW前端调优23大规则(十)——精简JavaScript和CSS

JavaScript ( JS ) 是一种具有函数优先的轻量级解释型或即时编译型的编程语言。它是作为开发Web 页面的脚本语言而出名的，是构建Web页面的首选。当然它也被用到了很多非浏览器环境中，例如 Node.js、 Apache CouchDB 和 Adobe Acrobat。JavaScript 是一种基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。本章节介绍在JavaScript部署过程中如何精简JavaScript和CSS。

根据雅虎前端性能测试团队给出的数据，40%到60%的雅虎用户拥有空的缓存体验，所有页面浏览量中约有20%是使用空缓存完成的，所以我们必须尽可能的保证页面的轻量化。

精简JavaScript和CSS通常有以下几种方式：

1) 精简（Minificaton）

精简的目的是减少JS文件的大小，从代码中移除不必要的字符，所有的注释以及不必要的空白字符（空格、换行和制表符）都需要移除。缩小JS文件可以减小下载文件的时间，这样可以改善响应时间。

2) 混淆（Obfuscation）

混淆是一种可应用于源代码的替代的优化方式，和精简一样，混淆也可以移除注释和空白，当然混淆同时还会改写代码，混淆会将函数和变量的名字转换为更短的字符串，这样代码更加精炼，当然代码也就变的更加难阅读了，如以下实例：

源代码如下：

var a = document.getElementById('a');

a.innerHTML = 'hello world';

混淆后的代码如下：

(function(a, b, c, d, e, f){

a[d] = a[b][c](d);

a[d][e]=f;

})(this, 'document', 'getElementById', 'a', 'innerHTML', 'hello world');

混淆比缩小更复杂，因此更容易因迷惑步骤本身而产生错误。在对美国十大网站的调查中，缩小比例达到了21％，而混淆的比例为25％。尽管模糊处理的尺寸减小了很多，但缩小JavaScript风险较小。

js混淆器正常有两种：

a) 通过正则替换实现的混淆器；

b) 通过语法树替换实现的混淆器。

3) 工具精简

两种用于缩小JavaScript代码的流行工具是JSMin和YUI Compressor。YUI压缩机还可以缩小CSS。

JSMin是一个过滤器，可以从JavaScript 文件中删除注释和不必要的空格。它通常会将文件大小减少一半，从而加快下载速度。

下面是使用JSMIN压缩的一个实例：

获得选定的商品属性源代码如下：

function getSelectedAttributes(formBuy)

{

var spec_arr = new Array();

var j = 0;

for (i = 0; i < formBuy.elements.length; i ++ )

{

var prefix = formBuy.elements[i].name.substr(0, 5);

if (prefix == 'spec_' && (

((formBuy.elements[i].type == 'radio' || formBuy.elements[i].type == 'checkbox') && formBuy.elements[i].checked) ||

formBuy.elements[i].tagName == 'SELECT'))

{

spec_arr[j] = formBuy.elements[i].value;

j++ ;

}

}

return spec_arr;

}

使用JSMIN压缩后的代码如下：

function getSelectedAttributes(formBuy){var spec_arr=new Array();var j=0;for(i=0;i<formBuy.elements.length;i++){var prefix=formBuy.elements[i].name.substr(0,5);if(prefix=='spec_'&&(((formBuy.elements[i].type=='radio'||formBuy.elements[i].type=='checkbox')&&formBuy.elements[i].checked)||formBuy.elements[i].tagName=='SELECT')){spec_arr[j]=formBuy.elements[i].value;j++;}}return spec_arr;}

YUI Compressor设计为100％安全，并且比大多数其他工具产生更高的压缩率。与JSMin相比，YUI库的测试节省了20％以上（在HTTP压缩后变为10％）。YUI Compressor还能够通过使用Isaac Schlueter基于正则表达式的CSS缩小器的端口来压缩CSS文件。

以上面获得选定的商品属性源代码为例，使用YUI Compressor压缩后的代码如下：

function getSelectedAttributes(a){var b=[],c=0;for(i=0;i<a.elements.length;i++){var d=a.elements[i].name.substr(0,5);'spec_'==d&&(('radio'==a.elements[i].type||'checkbox'==a.elements[i].type)&&a.elements[i].checked||'SELECT'==a.elements[i].tagName)&&(b[c]=a.elements[i].value,c++)}return b}

4) 压缩和精简（Gzip and Minification）

上面介绍的是使用JSMIN和YUI Compressor工具对内容进行压缩，我们除了可以对文件内容压缩外，也可以对JS和CSS文件本身进行压缩，通常使用最多的是Gzip的压缩方式对文件进行压缩，这样通常可以使用文件大小缩小70%左右。

Gzip对Web系统中的.js和.css文件进行压缩，保存成.jsgz和.cssgz的文件，同时将web系统中引用js、css文件的地方转换为引用jsgz 、cssgz文件，客户端请求jsgz、cssgz文件时，服务器通过过滤器设置header，将所有以jsgz、cssgz结尾的文件的请求增加设置“header Content-Encoding=gzip”的响应头。

5) 精简CSS（Minifying CSS）

对CSS的精简通常会小于JavaScript的精简，因为通常CSS中的注释和空白比JavaScript少，以CSS优化最多的是合并相同的类、移除不使用的等。当然也有很多工具可以用于优化CSS，类似于JavaScript的优化方式。常见的CSS优化工具有：TestMyCSS、Stylelint和CSS Triggers等。