当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 提高网页的效率 Use YSlow to know why your web Slow

CSS样式表
CSS 表单元素不继承body的字体属性
网页制作学习教程 CSS Position
网页设计学习教程 CSS盒模型
vertical-align 表单元素垂直对齐的解决方法
不用Cookie的仿刷新二级高亮菜单
CSS3 优势以及网页设计师如何使用CSS3技术
CSS 网页制作 提高CSS可阅读性
CSS 样式表中引用图片地址在各浏览器中的差异
CSS Sprite优化 减少HTTP链接数
网页制作中应用的50个CSS技巧(国外)
CSS 英文教程 CSS语法
CSS 网页文字渐变效果
纯css 圆角实现代码
CSS 新的图像替换方法
不必需的样式脚本文件导致页面不能及时更新
CSS 约定写法 利用扩展
最全的CSS浏览器兼容问题小结
CSS 网页图文混排的10个技巧
IE的CSS制作网页技巧3则
创造100% 自适应css布局的行之有效的方法

CSS样式表 中的 提高网页的效率 Use YSlow to know why your web Slow


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 64 ::
收藏到网摘: n/a

内容再丰富的网站,如果慢到无法访问也是毫无意义的; SEO做的再好的网站,如果搜索蜘蛛抓不到也是白搭(页面效率和搜索蜘蛛之间的关系,需要进一步的确认,此为和上篇保持统一); UE设计的再人性化的网站,如果用户连看都看不到也是空谈。 所以网页的效率绝对是最值得关注的方面。虽然我们在 《如何提高网页的效率(上篇)——提高网页效率的14条准则》提到了如何提高网页效率的14条准则,但是如何知道我们现在的网页的效率到底如何?到底处于怎样一个级别?又有哪些方面做的不够好,需要改进呢?也许,你会说,问一下用户不就知道了吗?但是相比感性比例占据太大的用户感受而言,理性的工具和数据更具有说服力。本篇就将向你介绍一款评测网页效率的工具——YSlow(why slow,这个名字起的太好了)。

yslow
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可以跳过此步。
firefox,firebug,yslow
图2:在菜单中先打开Firebug插件


点击【Performace】菜单

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

firefox,firebug,yslow
图4:YSlow给出的本页面效率评估

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

firefox,firebug,yslow
图5:YSlow可以给出每条准则的详细评估信息和建议

点击【Stats】菜单

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

firefox,firebug,yslow
图6:【Stats】视图信息

点击【Components】菜单

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

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

点击【Tools】菜单

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

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

点击【Help】菜单

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

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

后记

“工欲善其事,必先厉其器!”好的工具的确能很大的提高我们的工作效率。但是“阿斗”就算手里拿着“方天画戟”,估计也没有几个人怕他。好的工具是一方面,但是更重要的还是提高我们自身的知识水平。就如同这款YSlow,如果没有 《如何提高网页的效率(上篇)——提高网页效率的14条准则》中的理论知识,工具提供的信息我们看到的可能只是表面,就算看懂了数据,我们也很难知道对应的手段和措施。壮汉拿厉斧,这样伐木才能又快又轻松。