解读如何用YSlow分析咱们页面

YSlow是yahoo美国开发的一个页面评分插件，很是的棒，从中咱们能够看出咱们页面上的不少不足，而且能够知道咱们改怎么却改进和优化。

仔细研究了下YSlow跌评分规则。

主要有12条：

1. Make fewer HTTP requests 尽量少的http请求。。咱们有141个请求（其中15个JS请求，3个CSS请求，47个CSS background images请求），多的可怕。思考了下，为何把这个三种请求过多列为对页面加载的重要不利因素呢，而过多的IMG请求并无列为不利因素呢？

发现原来这些请求都是能够避免的。

15个JS和3个CSS彻底能够经过特殊的办法进行合并（这个技术部已经帮咱们解决了，实在是太感谢了，嘿嘿。），这样合并之后，通常状况下页面上只会出现一个JS和一个CSS（对JS的封装得有必定的要求）。

可是47个CSS background images请求改怎么解决呢？为何页面上的纯IMG请求时合理的，而CSS background images请求过多就是不利因素了呢。这个我想了好久，总算明白，原来是这样的：

通常页面上的ICON，栏目背景啊，图片按钮啊，咱们都会用图片CSS背景来实现，而通常这个图片CSS背景用到的图片都是比较小的，因此彻底能够把这些图片合并成一个相对比较大的图片，这样页面上只会出现一个CSS background images请求，最多也就2-3个。后来仔细看了下雅虎美国的页面，他们的确也是这样作的，虽然这样作须要花必定的时间来有规则的合并这些ICON，栏目背景，图片按钮，以方便CSS调用，可是这样作绝对是合算的，并且是有必要的，YSlow也是极力推荐的。

2.Use a CDN 这项咱们的评分是F级，最低。说实在的，我刚开始什么是CDN都不知道。后来查了GOODLE才知道。CDN的全称是Content Delivery Network，即内容分发网络。其目的是经过在现有的Internet中增长一层新的网络架构，将网站的内容发布到最接近用户的网络”边缘”，使用户能够就近取得所需的内容，解决Internet网络拥挤的情况，提升用户访问网站的响应速度。从技术上全面解决因为网络带宽小、用户访问量大、网点分布不均等缘由所形成的用户访问网站响应速度慢的问题。

看来上述的解释后，基本上明白了CDN是怎么回事，后来咨询了下中文站点SA，得知咱们网站目前的确尚未作CDN的优化，可是听说咱们有更加先进的技术来解决相似的问题（具体什么技术那就保密了），可是毕竟CDN也是个至关不错的技术，因此在咱们先进技术的基础上在作CDN优化，确定比如今更好，嘿嘿。听说SA明年会作几个点的CND。

3. Add an Expires header 设置过时的HTTP Header.设置Expires Header能够将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中.

其实咱们网站也作了这个优化，至少图片在这个上作过优化，可是没有作彻底。咱们的CSS和JS都尚未作过优化，却是外部引入的一个广告JS作了，呵呵。其实设置过时的HTTP Header 更应该作在脚本, 样式表, Flash上.不过听说这个SA也是没有作的，可是有必定的风险，由于JS和CSS是有必定的逻辑，若是服务器端和客户端都存在缓存的话，万一出了什么问题，对咱们之后查找问题的所在和增长难度，不过我想二者中是能够权衡和并存的。

4. Gzip components 对咱们的页面内容进行Gzip格式的压缩，Gzip格式是一种很广泛的压缩技术，几乎全部的浏览器都有解压Gzip格式的能力，并且它能够压缩的比例很是大，通常压缩率为85%，就是说服务器端100K的页面能够压缩到25K左右的Gzip格式的数据发给客户端，客户端收到Gzip格式的数据后自动解压缩后显示页面。

这点咱们网站基本上是100%作到了，可是咱们这项的评分并无达到想象中的A级，缘由是出在咱们的外部连接，好比咱们首页，有外部的广告投放JS，这个JS说拥有的网站是没有作过GZIP优化，连累了咱们网站，因此咱们也只有B，或者C级。

5. Put CSS at the top 把CSS外部连接放到页面的顶部。

其实这个原则咱们通常都遵照的，若是把CSS外部连接做为逻辑的一部分出如今页面头部如下，我我的以为这个自己就是个错误。还好，咱们的页面基本上都作到了，但是有些页面好比LIST页面，仍是出现了和逻辑挂钩的CSS连接，缘由是为了解决一些原本就不合理的产品逻辑。因此，咱们WEB前端工程师有义务杜绝这些不合理的产品逻辑破坏咱们的页面结果及页面加载速度，不能为了实现而实现。