文档章节

评测网页效率的工具—YSlow

j
 james_laughing
发布于 2015/01/13 13:11
字数 1059
阅读 81
收藏 9

[转]评测网页效率的工具—YSlow

本文转自:http://www.yuloo.com/news/2008-06-04/89192.html

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

  很遗憾,微软的IE系列浏览器不能使用YSlow。

  YSlow只能使用在FireFox浏览器上。

  如果要想使用YSlow,那么你必须先安装FireFox。

  如果要想使用YSlow,那么你就要安装FireFox上的Firebug插件。

  这看上去好像有点令人沮丧,但是事实上它并不像想象中的那么麻烦,只要按照下面的步骤你将能很快的使用YSlow:

  到http://www.mozilla.net.cn/firefox/ 下载最新版的FireFox,并安装它。当然如果你已经安装了FireFox可以跳过此步。

  到https://addons.mozilla.org/en-US/firefox/addon/1843/ 下载最新版的Firebug,并安装它。当然如果你已经安装了Firebug可以跳过此步。

  到https://addons.mozilla.org/en-US/firefox/addon/5369/ 下载最新版的YSlow,并安装它。当然如果你已经安装了YSlow可以跳过此步。

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

  图2:在菜单中先打开Firebug插件(点击小图查看完整大图)

  点击【Performace】菜单

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

  图3:YSlow给出的本页面效率评估

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

  图4:YSlow可以给出每条准则的详细评估信息和建议

  点击【Stats】菜单

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

  图5:【Stats】视图信息

  点击【Components】菜单

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

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

  点击【Tools】菜单

  【Tools】菜单包含4个子菜单,就是4个实用工具。【JSLine】工具会生成JSLine报表,报表是对本网页中JS脚本的分析报告,包含错误和建议。【ALL JS】工具,将生成本页面所有脚本代码便于阅读和打印的报表页面。【ALL CSS】工具,将生成本页面 所有CSS样式表代码便于阅读和打印的报表页面。【Printable View】将【Performance】和【Stats】视图中的信息生成一份更适合阅读和打印的报表页面。

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

  点击【Help】菜单

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

  图8:【Help】菜单是些常用的帮助入口

本文转载自:http://www.cnblogs.com/freeliver54/archive/2010/10/29/1864396.html

j
粉丝 28
博文 455
码字总数 22188
作品 0
广州
私信 提问
网站性能工具Yslow的使用方法

Yslow是雅虎开发的基于网页性能分析浏览器插件,从年初我使用了YSlow后,改变了博客模板大量冗余代码,不仅提升了网页的打开速度,这款插件还帮助我分析了不少其他网站的代码,之前我还特意写...

LorinLuo
2015/03/11
0
0
YSlow使用指南_最新2.0使用指南中文版

YSlow分析网页,并提出如何提高其性能的基础上一套规则,高性能的网页。我搜索一下”Yslow使用说明“,发现都是旧版本Yslow的使用介绍。于是翻译了一下yahoo官方关于新版Yslow的的使用帮助,希...

光石头
2011/06/26
0
1
网页优化工具 YSlow 宣布开源

正如下图的轻轻一点,YSlow就开源了! YSlow 是由 Yahoo! 创建的一个浏览器插件,发布于2007年。YSlow可以帮助我们可以看出我们页面上的很多不足,并且可以告诉我们改怎么改进和优化。 Yaho...

虫虫
2012/02/17
4.4K
5
页面性能测试工具--YSlow

(1) 从Firefox的Add-on上下载 ”YSlow" (2)重启Firefox检查是否YSlow已经被正确的安装 (3)到我们要测试的页面,点击任务栏最右下角的 “YSlow"图标 (4)在YSlow的工具窗口,切换到"Home"的标签...

青铜骑士
2013/12/23
0
0
YSlow 2.0.3 发布

改进内容: * Check compatibility with FF 3.6 * Use YSlow.firefox.net when Firebug Net panel is disabled. * [2711698] Fix issue with https POST (a.k.a YSlow caused problem browsi......

红薯
2010/01/22
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

微服务之架构技术选型与设计

本文主要介绍了架构技术选型与设计-微服务选型,Spring cloud 实现采用的技术,希望对您的学习有所帮助。 架构技术选型与设计-DUBBODubbo,是阿里巴巴服务化治理的核心框架,并被广泛应用于阿...

别打我会飞
今天
3
0
在Windows中运行Linux bash命令的几种方法

如果你正在课程中正在学习 shell 脚本,那么需要使用 Linux 命令来练习命令和脚本。 你的学校实验室可能安装了 Linux,但是你自己没有安装了 Linux 的笔记本电脑,而是像其他人一样的 Window...

老孟的Linux私房菜
今天
8
0
深入理解计算机系统(1.1)------Hello World 是如何运行的

上一篇序章我谈了谈 程序员为啥要懂底层计算机结构 ,有人赞同也有人反对,但是这并不影响 LZ 对深入理解计算机系统研究的热情。这篇博客以案例驱动的模式,通过跟踪一个简单 Hello World 程...

vinci321
今天
3
0
Linux操作系统之Shell程序设计

Linux操作系统之Shell程序设计 Shell是种命令解释程序,也可以看作是一种命令语言的解释器。 用户在与Shell交互时所输入的命令行必须符合Shell命令的语法和语义规范,才能够被Shell理解并执行...

linuxCool
今天
7
0
Java Foreach拉姆达表达式

以下案例分析了foreach循环和Java8 拉姆达表达式的区别 public static void main(String[] args) {/* * foreach 和 list */List<String> arrs = new ArrayList<>();...

cuishy
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部