性能测试全栈笔记

四、web前端性能测试

其实前端性能测试并不是专题主要内容，但了解一下也没有坏处

专题核心方向：后端性能处理与监测

1.使用工具

web前端性能测试工具：YSlow（雅虎出品）

推送：YSlow下载及安装配置教程

YSlow，可以出具前端性能报告的一款在线检测工具，非常经典，请看下图：

下面解释每个组件的意思：

1）home页签

Grade your web pages with YSlow

含义：使用YSlow对网页进行评分

home页为插件主页，可选择rules（评分规则，后面会说），点击run test即可运行全自动评分过程，所见即所得，非常方便

2）Grade页签

Grade页主要关注YSlow工具给出的综合评分，我爱测试网给出的是综合结果是B，算是合格标准，一般按高低分为A-B-C-D-E-F等，越往后质量越低，需优化，如果能拿到A，至少前端性能方面表现还是相当不错的

Grade页签值得关注并优化的地方：

• Make JS and CSS external–将CSS 和JS 使用外部的独立文件，这点有点和1 冲突，但是仔细分析下，并不矛盾。
  将CSS 和JS 独立成相应的文件，使用link 和script 标签应用。
• Add an Expires header–为静态资源文件增加过期时间，让用户通过本地缓存来更快的访问网站
  因为静态资源文件（CSS\JS\IMG 统称静态资源文件）往往是变化不大的，那么可以在HTTP头中增加相应的过期时间，让浏览器缓存在本地，这样当第二次使用的时候，就不会下载全部内容，只是进行状态检查。
• Gzip components–压缩静态资源内容，减少网络传输时间。
  将静态内容压缩后，减少网络传输时间；因为IIS 的压缩设置相对较烦，可以使用第三方工具，如IISxpress，支持32 位和64 位，而且还有一个技术交流版的授权

完成以上三项的优化，前端性能可以得到明显的提升！

3）Components页签

The page has a total of 17 components and a total weight of 519.0K bytes

含义：表示该页面的组件数量（17个），以及消耗的字节数（519k）

这里主要是一些静态资源消耗

4）Statistics页签

The page has a total of 17 HTTP requests and a total weight of 519.0K bytes with empty cache

含义：表示该页签的http请求数（17个），以及请求消耗的字节数（519k），以及缓存状态（这里是空）

最后介绍一下YSlow的三条规则：

默认使用第一条YSlow规则，也是最全的评分机制，又称为YSlow-23条规则，其余分别为经典型、博客型规则，一般不使用

有兴趣的小伙伴可以研究一下YSlow其余的优化机制，比如dns，外部静态资源引用，cdn，跳转，标签等等

综合YSlow，可以研究一下雅虎前端性能（YSlow）的35条优化规则：

推送地址：雅虎前端性能优化（YSlow）35条规则

至此，web前端性能测试专题课完结，有兴趣的小伙伴可自行扩展，但牢记，本期性能全栈专题课程核心为后端性能测试的综合学习与实战。

下一章节开始进入接口与Jmeter工具的世界，敬请期待。。