利用Firefox与Yahoo的YSlow给页面评分

　　前两天再次把主题从webdemar换成rock solid，很开心这个主题的名字里也有rock，加上很华丽的黑色风格实在是心动了。然而这个主题实现的功能实在比较少，而且貌似是为广告网站专门设计的，以至于主题属性全是广告项，实在看得不是很爽。最后还是决定给他做了个大手术，于是乎在Rock多次折腾之后就变成了现在这个样子。然而有些朋友打开的时候发现常常卡着不动了，之后分析了下发现JS文件调用比较多，这对页面非常影响。利用FF与YSlow分析了下，情况相当糟糕，于是便转移的转移，合并的合并，删除的删除，最后将一些插件的功能嵌进主题，一方面丰富主题，一方面减少插件的add_action行为，从而减少JS与CSS链接。最后在xiaorsz的一篇关于GZip介绍的日志里提取了一种不利用Apache的mod_deflate模块同样实现Gzip的方法，终于把首页的性能大大的提升。

　　在此分享下Yahoo的YSlow这款插件，分析得挺全面，但不管怎么样，能把速度提上去，多少分都是无所谓的。

　　YSlow是yahoo美国开发的一个页面评分插件，分析页面的不足，指导改进和优化。
　　———————————————————————–
　　『Yslow 安装说明』
　　1.下载FireFox的Add-in Yslow （自己可以找，更安全）
　　2.安装完成后重启FF，可以看到右下角有Yslow的图标，点击图标，再点击弹出框里的Preformance 标签，可以看到有对网站的评分
　　———————————————————————–
　　『YSlow 评分规则』
　　主要有12条：

　　1. Make fewer HTTP requests 尽可能少的http请求
　　其中JS请求，CSS请求，CSS background images请求，如果这3项加载的过多，对页面加载的非常不利，但纯img请求，并没有列为不利因素
　　一般情况下页面上只会出现一个JS和一个CSS（对JS的封装得有一定的要求）。
　　一般页面上的ICON，栏目背景啊，图片按钮啊，我们都会用图片CSS背景来实现，而一般这个图片CSS背景用到的图片都是比较小的，所以完全可以把这些图片合并成一个相对比较大的图片，这样页面上只会出现一个CSS background images请求，最多也就2-3个。后来仔细看了下雅虎美国的页面，他们的确也是这样做的，虽然这样做需要花一定的时间来有规则的合并这些ICON，栏目背景，图片按钮，以方便CSS调用，但是这样做绝对是合算的，而且是有必要的，YSlow也是极力推荐的。

　　2. Use a CDN CDN的全称是Content Delivery Network，即内容分发网络
　　其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络”边缘”，使用户可以就近取得所需的内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因所造成的用户访问网站响应速度慢的问题。
　　据说SA明年会做几个点的CND。

　　3. Add an Expires header 设置过期的HTTP Header.
　　设置Expires Header可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中.
　　设置过期的HTTP Header 更应该做在脚本, 样式表, Flash上.

　　4. Gzip components 对页面内容进行Gzip格式的压缩
　　Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%，就是说服务器端100K的页面可以压缩到25K左右的Gzip格式的数据发给客户端，客户端收到Gzip格式的数据后自动解压缩后显示页面。
　　如果外部链接，例如（有外部的广告投放JS，这个JS说拥有的网站是没有做过GZIP优化）也会连累了自身网站

　　5. Put CSS at the top 把CSS外部链接放到页面的顶部
　　其实这个原则我们一般都遵守的，如果把CSS外部链接作为逻辑的一部分出现在页面头部以下，这个本身就是个错误。WEB前端工程师有义务杜绝这些不合理的产品逻辑破坏我们的页面结果及页面加载速度，不能为了实现而实现。

　　6. Put JS at the bottom 把Javascript脚本尽量放到页面底部加载。
　　一开始为以为Javascript脚本尽量放到页面底部加载，是指所有的JS脚本都要放到底部，后来才发现，并不完全是这样，这里所指的脚本是指那些在加载过程中要执行的脚本，所以一般的处理办法还是页面头部引入JS链接，页面底部执行JS脚本程序。为了实现最大的下载并行，页面加载初期做的事，最好只有下载，HTML的下载，CSS的下载,JS的下载，等下载完成后再去实现页面渲染，JS脚本运行。

　　7. Avoid CSS expressions 避免CSS表达式
　　其实在CSS中运行表达式和页面加载中运行大量的JS脚本差不多，或许还更慢，而且还不兼容，虽然可以使我们在页面逻辑简单不少，但是我们完全可以抛弃之。

　　9. Reduce DNS lookups 尽可能少的DNS查找。
　　一般不要超过4个。不过这个主要是服务器架构上的问题，一个主域名，一个图片的，一个STYLE的，最多加上IFREAM的刚好4个。

　　10. Minify JS 对Javascript代码进行压缩。
　　一个不错的压缩工具，yuicompressor，雅虎美国开发的JAVA压缩包 yuicompressor.jar。压缩的相当完美，不仅把代码间的空格换行给去除掉了，而且对变量名，北部方法名都进行的简化，无意中实现了混淆脚本的作用。
　　对JS合并，进行压缩
　　一套是压缩前的（调试用的），一套是压缩后（发布到网上的），且要保证2套代码一致。
　　所以最完美的做法是在发布的时候实现JS脚本合并，并对其用yuicompressor进行压缩，然后发布到网上，把关键点移到发布的时候，这样我们只需要关心一套JS脚本（发布前的版本）。

　　11. Avoid redirects 避免重定向（跳转）
　　经常遇到的一种做法，注册成功后，旺旺会有一个页面提示“你已经注册成功，3秒后将自动跳转到XX页面”。
　　还有一种常见的链接，
　　http://www.google.com   或者 http: //www.google.com/ , 他们的区别很大！服务器如果接收到的URL是http: //www.google.com ，它会自动重新定向到http://www.google.com /，虽然最后都打开了google的首页，但是前者比后者多走了一步,重定向，所以加URL链接的时候，别忘了把最后的“/”给加上去。

　　12. Remove duplicate scripts 去除重复的脚本
　　不仅要做到一个页面脚本不重复，而且要做到N个页面，脚本要重用。

　　13. Configure ETags 好像是服务器端配置的问题
　　YAHOO的官方说明，好像还有一个AJAX CACHE(AJAX 缓存)。
　　随着我们AJAX应用的广泛，AJAX 缓存这个概念一定有，AJAX是个好东西，但是重复的数据，无休止的向后台申请，绝对是个错误（不仅是速度上还是对服务器压力上来说），所以就要对我们已经申请到的数据进行缓存，当第2次用到的时候，就直接从缓存中取，不要再去访问服务器资源了。这个思想不仅仅适合 AJAX，在所有有数据复用的应用中都应该考虑到。