前端页面测试方法初探

一. Yslow

   YSlow （解析为 why slow）是雅虎基于网站优化规则推出的工具，帮助你分析并优化网站性能。雅虎网站优化规则在十几个方面给你的网站提出优化建议，包括尽可能的减少 HTTP 的请求数 、使用 Gzip 压缩、将 CSS 样式放在页面的上方、将脚本移动到底部、减少 DNS 查询等十几条规则，YSlow 会根据这些规则分析你的网站，并给出评级。

1.1 安装方法

1.2 使用

  安装好Yslow 的 Chrome 扩展后，在浏览器右上角会有个图标。先访问你要分析的网站，然后点击 Run Test 就可以分析了。

1.3 结果分析

  点击完 Run Test之后，就会出现如下内容：

• Yslow分析结果得分界面(Grade)

上图就表示有ALL (23)，FILTER BY:CONTENT (6)，COOKIE（2），CSS (6)，IMAGES (2)，JAVASCRIPT (4)，SERVER (6)。意思就是说一共是23条评分规则，其中内容6条，css6条，cookie2条，图像2条，js4条，服务器6条。左侧列表处是详细的检测规则，评分从A-F几个级别；点击每个规则如果有降低得分的地方，在右侧会有提示，并给出yahoo的建议。点击read more 链接会得到关于这个评分更详细的介绍。

• 组建视图界面（Components）

这个视图窗口主要列出了页面文档，图片，css,css中的图像，js，favicon图像的大小，以及启用gzip压缩后大小，接收与发送cookie的大小，点击放大镜可以查看请求头信息，url是地址，expires是缓存是否存在，以及过期时间。response time是该文件响应的时间，单位是毫秒ms。后面是否启用etag，Action，yslow给出的建议部分，可以进行怎样的优化操作。比如我的背景图的话，它会给出压缩建议，并能提供一个压缩后的图片。

这个页面比较简单，主要是圆形分析图。其中上面有这么一句话“The page has a total of 9 HTTP requests and a total weight of 625.3K bytes with empty cache” 

其中，更改 setGrinderEnv.cmd 为如下内容：

set GRINDERPATH=E:\grinder-3.11

set GRINDERPROPERTIES=%GRINDERPATH%\grinder.properties

set CLASSPATH=%GRINDERPATH%\lib\grinder.jar;%CLASSPATH%

echo %CLASSPATH%

startAgent.cmd：

call E:\grinder-3.11\bin\setGrinderEnv.cmd

java net.grinder.Grinder %GRINDERPROPERTIES%

pause

startConsole.cmd：

call setGrinderEnv.cmd

java net.grinder.Console %GRINDERPROPERTIES%

pause