Yslow是雅虎开发的基于网页性能分析浏览器插件。
两种方法启动Yslow：
①打开Firebug窗口，选择Yslow选项。②直接点击火狐右下角的Yslow启动按钮。
YSlow有等级视图/组件视图/统计信息试图/辅助工具模块
Yslow视图：YSlow显示测试结果的分析,分为等级、组件、统计信息。你可以浏览这些观点之间选择标签以观的名字在YSlow标签的Firebug控制台。
1、Grade(等级视图)—Yslow的第二个选项卡
视图显示了等级为网页的评估结果。整个字母等级为页面显示在顶部随着全面数值的表现。这个页面是基于23可分级的高性能网页的规则，这些规则是列在按重要性的顺序,从最重要不重要。从 A 级到 F 级，A 级为最高。
如果页面与某一个规则无关，则显示 N/A ，表示不适用。
点击每一规则，都给出了改进建议。
1)Make fewer HTTP requests-减少HTTP请求
在一个页面上减少HTTP请求的数量,页面加载的速度更快。一些方法来减少组件包括:合并文件,结合多个脚本到一个脚本中,多个CSS文件合并到一个样式表,并使用CSS和图像映射。
2）Use a Content Delivery Network (CDN)-内容分发网络(CDN)
用户与web服务器响应时间的影响。跨多个地理位置分散的服务器上部署内容帮助用户觉得页面加载速度。
3）Avoid empty src or href-避免空src和href
空src和href，这种行为可能毁坏用户数据,浪费服务器计算周期生成一个页面,在最坏的情况下,使您的服务器通过空src和href，发送大量意想不到的流量。
4）Add Expires headers-添加Expires头信息
Web页面越来越复杂与更多的脚本、样式表、图片和Flash。第一次访问一个页面可能需要多个HTTP请求加载的所有组件。这些组件通过使用Expires头信息成为可缓存,避免不必要的HTTP请求对后续页视图。Expires头信息通常与图像有关,但他们可以而且应该被用在所有页面组件包括脚本、样式表和Flash。
5）Compress components with gzip-用gzip压缩组件
压缩减少响应时间减少HTTP响应的大小。Gzip是目前最受欢迎和最有效的压缩方法,总体上降低了响应大小约70%。大约有90%的今天的互联网流量声称支持gzip的浏览器。
6）Put CSS at top-把CSS放在顶部
样式表移动到文档的HEAD元素帮助页面出现加载更快,因为这允许页面逐步呈现。
7）Put JavaScript at bottom-把JavaScript放在底部
JavaScript脚本块并行下载,也就是说,当一个脚本下载,浏览器不会启动任何其他下载。帮助页面加载更快,脚本移到页面的底部延迟加载
8）Avoid CSS expressions 避免CSS表达式
CSS表达式(IE版本开始支持5)是一个强大的,和危险的,动态设置CSS属性的方法。这些表达式经常估算:当页面呈现和大小,当滚动页,甚至当用户将鼠标页面。这些频繁的估算降低用户体验。
9）Make JavaScript and CSS external-使用外部JavaScript和CSS
在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在 浏览器中产生缓存。内置在HTML文档中的JavaScript 和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。从另一方面来说，如果外部文件中的 JavaScript和CSS被浏览器缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大小。
JavaScript文件外部加载的好处
-
统一定义JavaScript代码，方便查看，方便维护。
-
使代码更安全，可以压缩，加密单个JavaScript文件。
-
浏览器可以缓存JavaScript文件，减少宽带使用（当多个页面同时使用一个JavaScript文件的时候，通常只需下载一次）。
10）Reduce DNS lookups-减少DNS查找
域名系统(DNS)主机名映射到IP地址,就像:只要还不是电话簿就好了别人的名字映射到他们的电话号码。在浏览器中输入URL www.yahoo.com时,浏览器接触一个DNS解析程序返回服务器的IP地址。DNS是有成本的;通常需要20到120毫秒,查找主机名的IP地址。浏览器不能下载任何东西从主机到查找完成。
11）Minify JavaScript and CSS-压缩JavaScript和CSS
这种方法删除不必要的字符从一个文件,以减少其大小,从而提高加载时间。当一个文件缩小则是,评论和不必要的空白字符(空间、换行符和选项卡)移除。这可以提高响应时间,因为减少了下载文件的大小。
12）Avoid URL redirects-避免URL重定向
URL重定向是使用HTTP状态码301和302。URL重定向就是把一个URL重定向到另一个URL上去。重定向即是把一个目录或者文件的访问请求转发至另外一个目录或者文件，当用户发出相应的访问请求时将自动跳转到指定的位置，常见的重定向有301（永久重定向）及302（暂时重定向）两种
13）Remove duplicate JavaScript and CSS-删除重复的JavaScript和CSS
在同一个页面中重复引用JavaScript文件会影响页面的性能。重复脚本会引起不必要的HTTP请求和 无用的JavaScript运算，这降低了网站性能。
在Internet Explorer中会产生不必要的HTTP请求，而在Firefox却不会。在Internet Explorer中，如果一个脚本被引用两次而且它又不可缓存，它就会在页面加载过程中产生两次HTTP请求。即时脚本可以缓存，当用户重载页面时也会产 生额外的HTTP请求。
除增加额外的HTTP请求外，多次运算脚本也会浪费时间。在Internet Explorer和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。。
14)Configure entity tags (ETags)-配置实体标记(ETags)
Etag 在HTTP1.1中有介绍，主要的作用就是在(css file, image, javascript file)文件后面添加一个唯一的参数（相当于查询参数字符串），Etag有服务器端生成，并且随着文件的改变而改变，这样浏览器端就会只重新请求获取 Etag发生变化的文件，减少浏览器端数据的流量，加快浏览器的反应速度，重要的是减轻服务器端的压力，所以服务器端Etag的实现就比较重要了。
15)Make AJAX cacheable-使AJAX缓存
AJAX的一个好处是它提供了即时反馈给用户,因为它从后端web服务器异步请求的信息。然而,使用AJAX并不能保证用户不会等待异步JavaScript和XML响应返回。优化AJAX响应的重要的是要提高性能,并使缓存的响应是最好的方法来优化。
16）Use GET for AJAX requests-AJAX请求使用get方法
使用XMLHttpRequest对象时,浏览器实现在两个步骤:(1)发送头部信息,(2)发送数据。最好是用get,而不是post,因为一起发送头部信息和数据(除非有很多缓存)。IE的最大URL长度是2 KB,因此如果你发送更多数量的数据可能无法使用。
17）Reduce the number of DOM elements-减少DOM元素
复杂的页面下载意味着更多的字节,这也意味着使用JavaScript访问DOM元素比较慢。减少页面的DOM元素的数量来提高性能
18）Avoid HTTP 404 (Not Found) error-避免HTTP 404(Not Found)错误
一个HTTP请求和接收404(未找到)错误是昂贵和降低了用户体验。一些网站有帮助404的消息(例如,“你的意思是……?”),这可能帮助用户,但是服务器资源还是浪费了。
19）Reduce cookie size-减少cookie大小
HTTP cookies是用于身份验证、个性化和其他用途。Cookie信息交换在web服务器和浏览器之间的HTTP头信息,所以保持cookie最小化对响应时间的影响。
20） Use cookie-free domains-使用不存在的cookie域名
当浏览器请求一个静态图像并发送cookie的请求时,服务器忽略了cookie。这些cookie是不必要的网络流量。为了解决这个问题,确保静态组件被请求无cookie的要求通过创建子域名和托管。
为了避免让浏览器发送这些无用的cookie信息，在服务器端做设置都是没有用的，因为这浏览器端主动发送的。只有通过使用另一个不存在cookie的域名，才能让浏览器不发送cookie信息。
21）Avoid AlphaImageLoader filter-避免AlphaImageLoader过滤器
IE-proprietary AlphaImageLoader过滤器试图解决一个问题与半透明的真彩色PNG文件在IE版本小于Version 7。AlphaImageLoader 是IE中浏览器中特有一个CSS滤镜，可以处理IE6浏览器中图处理PNG图片的透明底色的问题
使用了AlphaImageLoader 滤镜，在图片下载完成之前，会组织页面渲染其他的组件，使浏览器被卡死。而我们知道，普通的图片的下载是一个类似异步的加载过程，并不会导致浏览无法加载解析其他的组件。 使用 AlphaImageLoader 滤镜对于前端性能的影响还是挺大的。
22）Do not scale images in HTML-在HTML代码中不要缩放图片
网页设计师有时设置形象维度通过使用图像的宽度和高度属性的HTML元素。原始的图片大小就应该是多大，图片不要比期望的尺寸小，也不要比需要的尺寸大，如果原始的图片大于期望的尺寸，很明显就会额外花更多时间下载图片，浪费带宽，影响性能。只有在图片原始大小跟设定的大小相等的时候，浏览器在下载完图片后就可以马上渲染出图片，无需任何其它额外的计算，前端性能才是最好的
23）Make favicon small and cacheable-让 Favicon 文件尽量的小且缓存它
favicon.ico 就是一个特别醒目的站点标识，当我们将网站收藏起来的时候，这个图片就会在搜藏栏（书签栏）显示出来，favicon 应该也是由此得名的。记住这个ICO格式文件只能叫做favicon.ico。
而IE浏览器中对 favicon.ico 文件的处理更特别，在加载一个页面的时候，首先会去请求 favicon.ico 文件，然后才会请求页面中其它的组件。这个时候的 404 的影响就更加“巨大”了。
Make favicon small 建议是小于1K
Make favicon cacheable 就是给.ico类型的文件设置 Expire Head，而 favicon.ico 的过期时间我们可以设置的尽可能的长一些，因为 favicon.ico 在网站建立之后，基本就不会改变了。
