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

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

一.常用性能测试工具

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

Yslow

PageSpeed

LightHouse

YSlow

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

PageSpeed

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

LightHouse

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

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

定位：非性能关键因素

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

方案：

采用url后加?version=XXXXX

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

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

方案2：不同版本的维护，变的复杂多变

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

2，请求数据大小指标

资源文件压缩

启用GZIP

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

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

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

减少DnsLookop

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

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

进行预解析，实现如下：

在html的head中加入

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

DnsLookop

预加载

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

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

使用方式：

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

提升后台响应速度

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

后台的响应速度：

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

四.总结

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

性能分析时，优先使用LightHouse

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

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