性能测试Y慢速前端调优23条规则-简化JavaScript和

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触发器等。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181026A0P7UY00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券