YSLOW:
什么是yslow:
YSlow是Yahoo发布的一款基于FireFox的插件。
如何安装yslow:
安装YSlow必须首先先安装 Firebug,然后下载YSlow,再对其安装。
yslow有什么用:
YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。
使用yslow需要注意的地方:必须连接网络,才能对页面进行分析。
使用yslow需要注意的地方:它也发布了chrome版本,在chrome中,功能比基于firebug的要少。
如何使用Yslow:
当我们打开一个网站,如:http://www.xuex123.com/ ,启动firebug,在firebug控制台中,进入yslow分析界面,点击run text,yslow会开始分析页面。
在这一栏中,有九个选项,与一个评分。
home: Yslow起始界面
grade: Yslow分析出来的数据会在这里显示。
components: Yslow分析多少HTTP请求,以及下载的文件数量与大小。
statistics: Yslow分析的数据格式图。
tools: Yslow而提供的一些工具,比如:JSlint、smush.it、YUI CSS Comperssor等。
rulesets:Yslow提供的分析基准,我这里是以小网站或博客为基准来分析。
edit:Yslow提供的分析基准的设置按钮。
printable view:Yslow分析数据表格。
Grade:
在Grade中,会分析出如上数据,大体分为五类,CONTENT、CSS、IMAGES、JAVASCRIPT、SERVER。它的基准是以美国的成绩评分来划分的,比如A、B、C、D等。Grade中的数据分析是这个工具的重中之重,现在我才想起来,英语,可恶的英语啊,学习好英语,对于编程,实在是太重要了。下面,我以上图来介绍它。
make fewer http requests:(检测如何减少http请求)。
{此项告诉我们,有6个JAVASCRIPT文件,可以合并成一个文件。有12个背景图片,可以使用CSS SPRITES技术}
注:CSS SPRITES技术,是指通过背景定位这个属性,来显示出图片,12个背景图片可以合并成一张图。
avoid empty src or http:(检测是否有空的src或者http)。
compress componentes with gzip:(检测是否开启gzip服务端的压缩)。
{此项告诉我们,有九处可以开启gzip压缩}
put css to top:(检测样式是否放在头部)。
put javascript to bottom:(检测JS脚本文件是否放在底部)。
avoid css expressions:(避免在样式中使用expressions)。
reduce dns lookups:(减少DNS的查找)。
minify javascript and css:(缩小写在HTML中的JavaScript与CSS)
略......
Components:
在components中,分析网页下载的数据会以表格的形式展现出来,包括以上几类。点击折叠的+doc会展现出具体的数据分析,再点击HEADERS按钮时,会显示的更加详细,如下图:
Statistics:
此项是对页面分析数据的直观几何图,包括HTTP请求的次数,下载文件的类型以及大小。
Tools:
顾名思义,工具的意思,Yslow提供了如下,几个工具:
JSLint - JavaScript验证工具
all JS - 页面中所有的JavaScript脚本
all JS Beautified - 页面中所有的JavaScript脚本完整版。
all JS Minified - 页面中所有的JavaScript脚本压缩版。
all CSS - 页面中所有的CSS样式文件
YUI CSS Compressor - 页面中所有的CSS样式文件压缩版
all Smush.it - 图片压缩,不失真。
Printable View - 所有分析数据的HTML表格展示。