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

最新推荐文章于 2019-12-28 17:08:27 发布

川石教育

最新推荐文章于 2019-12-28 17:08:27 发布

阅读量227

点赞数

分类专栏： Yslow前端调优文章标签：前端调优性能测试调优 JMeter JMeter性能调优

原文链接：https://zhuanlan.zhihu.com/p/98527059

版权

Yslow前端调优专栏收录该内容

20 篇文章

订阅专栏

性能测试前端调优
JavaScript ( JS ) 是一种具有函数优先的轻量级解释型或即时编译型的编程语言。它是作为开发Web 页面的脚本语言而出名的，是构建Web页面的首选。当然它也被用到了很多非浏览器环境中，例如 Node.js、 Apache CouchDB 和 Adobe Acrobat。JavaScript 是一种基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。本章节介绍在JavaScript部署过程中如何精简JavaScript和CSS。
根据雅虎前端性能测试团队给出的数据，40%到60%的雅虎用户拥有空的缓存体验，所有页面浏览量中约有20%是使用空缓存完成的，所以我们必须尽可能的保证页面的轻量化。
精简JavaScript和CSS通常有以下几种方式：

精简（Minificaton）
精简的目的是减少JS文件的大小，从代码中移除不必要的字符，所有的注释以及不必要的空白字符（空格、换行和制表符）都需要移除。缩小JS文件可以减小下载文件的时间，这样可以改善响应时间。
混淆（Obfuscation）
混淆是一种可应用于源代码的替代的优化方式，和精简一样，混淆也可以移除注释和空白，当然混淆同时还会改写代码，混淆会将函数和变量的名字转换为更短的字符串，这样代码更加精炼，当然代码也就变的更加难阅读了，如以下实例：
源代码如下：
var a = document.getElementById(‘a’);
a.innerHTML = ‘hello world’;
混淆后的代码如下：
(function(a, b, c, d, e, f){
a[d] = a[b]c;
a[d][e]=f;
})(this, ‘document’, ‘getElementById’, ‘a’, ‘innerHTML’, ‘hello world’);
混淆比缩小更复杂，因此更容易因迷惑步骤本身而产生错误。在对美国十大网站的调查中，缩小比例达到了21％，而混淆的比例为25％。尽管模糊处理的尺寸减小了很多，但缩小JavaScript风险较小。
js混淆器正常有两种：
a) 通过正则替换实现的混淆器；
b) 通过语法树替换实现的混淆器。
工具精简
两种用于缩小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}
压缩和精简（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”的响应头。
精简CSS（Minifying CSS）
对CSS的精简通常会小于JavaScript的精简，因为通常CSS中的注释和空白比JavaScript少，以CSS优化最多的是合并相同的类、移除不使用的等。当然也有很多工具可以用于优化CSS，类似于JavaScript的优化方式。常见的CSS优化工具有：TestMyCSS、Stylelint和CSS Triggers等。