前端调优——YSLOW工具

前端调优——YSLOW工具

在性能测试过程中，我们关注的响应不仅仅是服务器端的处理，还有前端页面的响应时间，那么前端页面响应也会影响我们整个业务的响应时间，所以前端调优对于一个大的网站，类似于门户网站来说就很重要。前端调优嘬核心的内容是前端调优的23大规则，而非工具的使用。不过今天还是浅谈一下YSlow这个工具的基本介绍。

YSLOW工具

YSLOW是YAHOO提供的一个前端分析的插件。常见支持的浏览器包括：FireFox、Chrome、Safari、Opera等。

YSLOW安装

YSLOW的安装步骤如下：

1.进入YSLOW 官方主页：http://yslow.org/，右击浏览器图标，这个浏览是我们打开YSLOW官方主页的浏览，例如，我们使用FireFox打开YSLOW主页，那么就在FireFox浏览器的图标上点右键，选择新建标签页打开链接，会产生一个页面，URL地址为https://chrome.google.com/webstore/detail/ninejjcohidippngpapiilnmkgllmakh

2.进入YSLOW下载插件的页面，http://crx.2333.me/，在页面输入扩展程序的ID号，这个ID来自上一个步骤中的URL址后面一串字符串，例如ninejjcohidippngpapiilnmkgllmakh

3.安装YSLOW

选中下载好的YSLOW插件，将其拖入到浏览器中即可。

YSLOW工具使用

YSLOW工具的使用主要有三个部分：Grade(等级)、Components(组件)、Statistics(统计)。

1.Grade标签页

Grade：等级结果，表示对整个网站分析后得到的综合评分，综合评分的结果分为6等级，分别使用A-F来表示，A表示最优化，F表示最差。如果某一测试规则与该页面无关，则在前面出现N/A标识，如下图：

Ruleset applied：表示评分时使用的规则，规则有三种：V2、V1、Small Site or Blog。默认一般使用是V2的规则集。不同的规则集表示分析站点的维度不同。

URL：表示分析的站点

ALL：表示分析前端性能所有的规则个数。

FILTER BY：表示按不同的维度进行筛选规则集。

规则树：左边会呈现出所有规则分析出来的结果，或者说在某个规则集下的评分结果，评分结果也是有6个，从A到F。

右边结果：右边结果会显示出每个规则维度的结果，和给出调优建议。

2.Components标签页

概述：显示所有的组件个数，以及组件的大小。如果从组件数的大小的角度来说，我们希望组件数越少越好，组件总的大小越小越好。

在组件标签页中会列出站点所有的组件数，一般的组件类型包括：doc、image、js、 css等。

如下图所示：

每个组件的信息包含：组件类型、组件大小(组件大小能小则小)、压缩后的大小、COOKIE 大小、HEADERS请求头的详细信息、URL、EXPIRES过期日期、RESPONSE TIME响应时间、ETAG标签。

3.Statistics标签页

显示使用缓存和不使用缓存时，请求的组件数和组件文件大小的情况。该统计以饼状图的形式，显示了在清空缓存和缓存加载两种清空下，页面打开的信息情况，如下图所示：