性能测试Ｙ慢速前端调优23条规则-简化ＪａｖａＳｃｒｉｐｔ和

JavaScript ( JS )是一种轻量级解释或实时编译的具有函数优先级的编程语言。它被称为开发网页的脚本语言，是构建网页的首选。当然，它也用于许多非浏览器环境，如节点。JS、阿帕奇沙发数据库和Adobe Acrobat。JavaScript是一种基于原型编程和多范式的动态脚本语言，支持面向对象、命令式和声明式(如功能编程)风格。本章介绍如何在JavaScript部署期间简化JavaScript和CSS。

根据雅虎前端性能测试团队提供的数据，40 %至60 %的雅虎用户拥有空缓存体验，所有页面视图中约20 %使用空缓存，因此我们必须尽可能确保页面的轻量级。

有几种方法可以简化JavaScript和CSS :

1精简) (Minificaton)

简化的目的是减小JS文件的大小，从代码中删除不必要的字符，并删除所有注释和不必要的空白字符(空格、换行符和制表符)。减少JS文件可以减少文件的下载时间，这可以提高响应时间。

2 )混淆(混淆)

混淆是一种可应用于源代码的可选优化方法。与简化一样，混淆也可以删除注释和空白。当然，混淆也会重写代码，混淆会将函数和变量的名称转换成更短的字符串，这样代码会更加精练，当然代码会变得更加难以阅读，例如下面的例子:

源代码如下:

风险值文件。getelementbyid ( ' a ' )；

Hello, world;

混乱的代码如下:

(职能 (a、、、、d、c) ※

[ d ] = [ b ] [ c ] ( d )；

[·[· d] = d;

} (一个“getelement id”一个“internal html”一个“hello world”)；

混淆比缩小范围更复杂，因此通过混淆步骤本身更容易出错。在对美国十大网站的调查中，减少率达到了21 %，而混淆率为25 %。虽然模糊处理的规模已经大大减小，但是减少JavaScript的风险较小。

有两种常见的JS混淆器:

a )通过定期替换实现的混淆器；

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

3 )工具简化

收缩JavaScript代码的两个流行工具是JSMIN和YUI Compressor。YUI压缩机还可以降低CSS。

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

以下是使用JSMIN压缩的示例:

获取所选商品属性的源代码如下:

函数getSelectedAttributes (表单购买)

- - -

Variable spec _ arr = new array ( );

Variable j = 0;

For ( i = 0; I

- - -

VaR prefix = Form Buy. Element [ I ].

If ( prefix = =' spec _' & (

(形式购买。元素 [I]。类型 == "无线电" | |表单买入. 元素 [I]。键入 == "复选框" > > 窗体购买. 元素 [I]。选中) | |

" Element One". Tagname = =' select' )

- - -

[ j ] = form buy. element [ I ]. Value;

j++；

}

}

返回spec 到达;

}

使用JSMIN压缩的代码如下:

函数getSelectedAttributes ( form buy ) { var spec _ arr =新数组( )；变量j = 0；对于( I = 0；IYUI压缩机被设计成100 %安全，并产生比大多数其他工具更高的压缩比。与JSMIN相比，YUI库的测试节省了20 %以上( HTTP压缩后节省了10 % )。YUI Compressor还能够通过使用IS AAC Schlu仪表的基于正则表达式的CSS缩减器的端口来压缩CSS文件。以上面获得的所选商品属性的源代码为例，使用YUI Compressor的压缩代码如下:函数GetSelectedAttributes ( A ) { VaR B = [ )，C = 0；对于( I = 0；i4 )压缩和缩减( GZIP和Min通知)上面的描述是使用JSMIN和YUI压缩工具来压缩内容。除了压缩文件内容之外，我们还可以压缩JS和CSS文件本身，通常使用GZIP压缩方法，这通常可以减少大约70 %的文件大小。压缩。联署材料和。CSS文件，并将它们保存为。和。CSS全球定位系统文件。同时，它将web系统中对jsgz和CSS gz文件的引用转换为对jsgz和CSS gz文件的引用。当客户端请求jsgz和CSS gz文件时，服务器通过过滤器设置标题，并将“标题内容编码= gzip”的响应标题添加到所有以jsgz和CSS gz结尾的文件请求中。5 )迷你化CSS通常不如JavaScript紧凑，因为CSS中的注释和空白通常比JavaScript少。最优化的CSS是合并相同的类并删除未使用的类。当然，也有许多工具可以用来优化CSS，类似于JavaScript。常见的CSS优化工具有:测试我的CSS、Style Lint、CSS触发器等。