前端性能分析工具指标解读与分析

2018-06-24 15:19:58 / 打印

目前,前端性能已经是用户体验的重要一部分,那么如何对站点进行性能测试以及如何优化,本文将在下面一一介绍

一.常用性能测试工具

网站性能评测工具有很多,我们选了比较有代表性的:

最具代表性的性能测试工具,但已经近四年未有过更新。虽然23条军规部分依然有效,但已经不能真实的反应网站的性能。而且不能提供最新的优化建议。

和Yslow类似的一个工具,优点是版本比较新,可以提供手机和PC两个层面的优化建议。

LightHouse:是谷歌浏览器自带性能分析工具,最强大。维度全,包含手机和pc,自定义网速而且性能指标兼容最新H5API有更为详细的优化说明。

二.评分与性能的关系

我们先看下京东和淘宝,在PageSpeed下的评分:京东:45,淘宝:66

多技术一定要,谷歌浏览器检查更新

Yslow下的评分: 京东76分,淘宝69分

可以看到两者的评分都不算太好,但我们能说它性能差吗

实际上看页面呈现耗时:淘宝648毫秒,京东549毫秒。

(一次访问,不代表两个网站的平均响应时间)

我们应该如果去看待该现象?其实LightHouse已经给出了答案

LightHouse中有两个维度:

Performance和BestPractice

一个是性能,一个是优化。

而Yslow和PageSpeed给出的,更多是优化层面的建议。

我们看下两大网站LightHouse的评测,在性能这方面,都是满分。

所以可以很好的解释我们上面的疑问。

三. 性能关键指标解读以及解决方案

指标大体可以分为如下3类:

1,缓存更新类指标

2,请求数据大小指标

3,网络请求优化指标

1,缓存更新类指标

为文件头指定Expires

作用:让浏览器尽量走缓存,同时当脚本更新时,能加载最新的脚本。

定位:非性能关键因素

缺点:在负载均衡下,如果多台机器的Etag不能保持一致,反而会损耗性能指定过期时间后,脚本更新后无法及时反应到客户端会发起多一次的304请求

对资源文件的命名引入hash值

方案1:对于未变化的资源再次加载会浪费些许流量

方案2:不同版本的维护,变的复杂多变

经过衡量,忽略Expires和Etag,当前我们采用方案1,等组件更新频度周期变长后,考虑采用方案2

2,请求数据大小指标

资源文件压缩

Cookie free

作用:减少请求响应的数据量,以加快传输速度

定位:性能关键因素

缺点:无

1,资源文件压缩,目前我们采用grunt

大的谷歌游览器

2,IIS和Nginx均启用GZIP

3,对cookie free要进行一点说明。同域下的静态文件下载会携带cookie,而且没有用处,所以很多网站的静态文件站点和主站是不同域的,从而解决该问题。但我们的cookie目前是记录到.teld.cn的,所以xxx.teld.cn访问resource.teld.cn的时候,均会携  带cookie。在不启用CDN的前提下,为了解决该问题,需要在script和link标签上加入属性crossorigin=“anonymous”

3,网络请求优化指标

减少请求数

如图是PC谷歌,有一个MaxPerGroup为6。 意思就是,http1.x,对于同一个域名,最大连接数为6.

以ajax为例子,一次最多发出6个,第7个要等前面的有空闲。目前我们的资源服务,以及SG是统一域名的,所以开发的时候特别要注意异步请求数,通过合并请求控制到6以内。

启用http2

一个、谷歌浏览器flash

Window 10与Window Server 2016版本才包含HTTP2

如果后台服务器是Window Server 2016版本,建议启用http2

减少DnsLookop

如图是谷歌浏览器的请求发送流程。

如果一个网站访问其他域名较多,可以对dns

进行预解析,实现如下:

在html的head中加入

<link rel="dns-prefetch"href="//resource.teld.cn">

当后续请求如果有再次访问该域名,将不会再进行

这一机制使得资源可以更早的得到加载并可用,

且更不易阻塞页面的初步渲染,进而提升性能

使用方式:

<link rel="preload"href="style.css"as="style">

<linkrel="stylesheet"href="style.css">

提升后台响应速度

当前主流浏览器的性能已经有了极大的提升,所以CSS解析,JS脚本的执行效率,Dom树的构建,已经不再是影响性能的主要因素。

后台的响应速度:

该部分无法一言而定,需要结合实际的业务场景,复杂度,来单一进行优化。右图的TTFB,如果耗时长,就代表后台响应慢,需要优化

Yslow和PageSpeed的评分,并不能真正反映网站的性能,但里面的一些观点依然值得学习

性能分析时,优先使用LightHouse

除了上述指标,还有很多其他指标,考虑到不是当前影响性能的主要因素,未一一列举

里面有很多个人观点,不当之处欢迎批评指正,谢谢!