测试之家淘宝店:主营软件测试定制服务 http://shop71136398.taobao.com/ 软件评测试考试论坛:http://www.testdao.com/forum-113-1.html 2012软件评测师考试群:28388329

评测网页效率的工具——YSlow

上一篇 / 下一篇  2008-04-08 13:57:16 / 个人分类:学习资料

yslow51Testing软件测试网[Z*X C aG1m%g

YSlow是由Yahoo开发者团队发布的一款基于Firebug的插件。而Firebug又是一款基于FireFox的插件。所以说YSlow是一款基于FireFox插件的插件。虽然有点绕,但是最终说明的问题是:

*dUl)g$b ~+laE#{F0
  • 很遗憾,微软的IE系列浏览器不能使用YSlow。
  • YSlow只能使用在FireFox浏览器上。
  • 如果要想使用YSlow,那么你必须先安装FireFox。
  • 如果要想使用YSlow,那么你就要安装FireFox上的Firebug插件。

#|1D QM*i}o$i!g051Testing软件测试网 ^,|aW,n`

51Testing软件测试网xv:_-O/xrP9l,\/[ts

这看上去好像有点令人沮丧,但是事实上它并不像想象中的那么麻烦,只要按照下面的步骤你将能很快的使用YSlow:51Testing软件测试网%My9?xG:GH

  1. http://www.mozilla.net.cn/firefox/下载最新版的FireFox,并安装它。当然如果你已经安装了FireFox可以跳过此步。
  2. https://addons.mozilla.org/en-US/firefox/addon/1843/下载最新版的Firebug,并安装它。当然如果你已经安装了Firebug可以跳过此步。
  3. https://addons.mozilla.org/en-US/firefox/addon/5369/下载最新版的YSlow,并安装它。当然如果你已经安装了YSlow可以跳过此步。

D%_gt uMK)r051Testing软件测试网E3Ir1] u `1@Q

51Testing软件测试网 @(H Zi5V(N"oM

图2:在菜单中先打开Firebug插件这时候打开FireFox,你将在【工具】菜单中看到【firebug】(如图2)。打开firebug,然后在firebug中点击YSlow菜单,便看进入YSlow的主界面(如图3)。

P5Rk Ca QO051Testing软件测试网l,E*E4?$u:{rp:_

4F/[4\A|4nv051Testing软件测试网 MM/L|*V U

图3:在菜单中先打开Firebug插件(点击小图查看完整大图)51Testing软件测试网;D-e`5l'dC SH

Y.ca tP4z051Testing软件测试网^S*o%Q2e!x

点击【Performace】菜单

!v7cfU?ZXBJ0YSlow便开始分析此页的效率,并从13个最影响网页效率的方面给出评估(如图4)。

7EQ([@9v.K ^*T!jL0

d5G;bJ4nh7FLj qU051Testing软件测试网1L?X+^&e

!V-`*y^8y%d0图4:YSlow给出的本页面效率评估

*^;Gs \r6F#k051Testing软件测试网[+H RG+w]-L

%C7t,g)T0]051Testing软件测试网#Fr*uc.M$eB!p\#H

可以看出来,YSlow评估的依据就是我们在《如何提高网页的效率(上篇)——提高网页效率的14条准则》中提到的前面13条。前面蓝色的字母表示这一条准备的得分。A最高。点击右面的三角形可以得到更多的信息和建议,有些信息里面还有“放大镜” 图标,点击也将展示更为详细的信息和建议。(如图5所示)

L{S^]?}051Testing软件测试网+{F'S.ok3U

M t]_9L-_e051Testing软件测试网3_ f!gmeb

图5:YSlow可以给出每条准则的详细评估信息和建议51Testing软件测试网;o.s]s!d5{/ne

51Testing软件测试网|Cn(P|3k2D \5B:];h

5n O'~ i!h4B7aq0

点击【Stats】菜单

51Testing软件测试网8w0J ^.`)cqH}

这个视图会告诉你页面的总体统计信息。包括页面大小、css样式表大小、脚本文件大小、总体图片大小、flash文件大小和css中用到的图片文件大小。还会告诉你,哪些东西被缓存了,缓存了多少等等。

nrj2\P4`e0

&?P~yj nF%E0

Doh!P*b(? }DH0

H6r8}q8bk/\0图6:【Stats】视图信息

8Dy%_ku QM051Testing软件测试网 C0p)Zj1E?)@5_

?5@\6w6V2x"l0

点击【Components】菜单

N6hL*]*} p)O5P0这个视图是一个页面所有部件的信息列表。从中我们可以得知每个部件的各种详细信息。如:类型、URL、Expires数据、状态、大小、读取时间、ETag信息等等。通过对这个列表的分析,我们就可以知道到底是什么东西最耗费我们的资源,从而有针对性的进行优化。

w"u"o^1pq3l7_?0

8wy4V2}o;s,q051Testing软件测试网5C)I%lE b6\a M

51Testing软件测试网 Ay tAJh[ L

图7:【Components】视图信息,点击“放大镜”图标我们可以知道更详细的信息(点击小图查看完整大图)

aM+qv"X)l~051Testing软件测试网Y+e7rR4v

51Testing软件测试网OB0@6sv&oA#@

点击【Tools】菜单

~C,O2lW6~0【Tools】菜单包含4个子菜单,就是4个实用工具。【JSLine】工具会生成JSLine报表,报表是对本网页中JS脚本的分析报告,包含错误和建议。【ALL JS】工具,将生成本页面所有脚本代码便于阅读和打印的报表页面。【ALL CSS】工具,将生成本页面 所有CSS样式表代码便于阅读和打印的报表页面。【Printable View】将【Performance】和【Stats】视图中的信息生成一份更适合阅读和打印的报表页面。51Testing软件测试网.]~&[#H'\Vl

51Testing软件测试网CgE;y"N T.[9lKb

51Testing软件测试网U"]4a/t*X C3D

51Testing软件测试网5vWE4_{ag

图8:【Tools】菜单,包含了4个子菜单

T8@"d3`*e)d0

RW4V7d[9Gd;B0

9W~.d'b+h&?u u0

点击【Help】菜单

51Testing软件测试网 e]6H-wUbq}(sD

【Help】主要是些常用的帮助途径的入口。从这里你可以很方面的访问YSlow的官方网络和博客。如果你还对YSlow的使用有什么疑惑的话,那么在这里你将获得满意的解答。

!P%G2b6^!e8y$B%nd)w0

b&Y+Vm3R"R051Testing软件测试网p9Y C-b2B#L

3` @y@m0图9:【Help】菜单是些常用的帮助入口

-u2C*G'j,d*]ST`4[0

}ceZS6L2P.G8b'U051Testing软件测试网5iuC}|X;Z:t
51Testing软件测试网@X dr,q/mO


TAG: 学习资料

-DNA's home 引用 删除 huoxingyinzi   /   2008-06-21 22:29:40
不客气,对这个东西也不太会用,不过知道看性能了,呵呵,有空过交流
逍遥小仙的个人空间 引用 删除 wuzhuayu   /   2008-06-16 23:04:33
5
很好的东西,:)
谢谢~
 

评分:0

我来说两句

Open Toolbar