YSlow评分达到A级
最近在进行大众点评网的网站前端重构，目前已经完成了部分页面。由原来的DIY JS和jQuery JS改为mootools，页面结构也更加规范，减少css和js文件的引用。
今天是一个比较重要的版本更新，虽然之前很有信心，但是上线后还是使用YSlow评测了下，好消息，重构的页面都是95分+，绝大部分都是99分，A级。(很多人问那一分丢在那里，看这里)
YSlow 是Yahoo开发者团队发布的一款基于Firebug的插件。用于分析网页，并根据一些高性能网站的规则进行相应的评级打分，对于网页性能优化有很好的帮助作用，告诉你那些部分影响了你的网页速度，Why Slow！！
主要规则有13条，其中11条比较关键：
- Make fewer HTTP requests--更少的http请求，也就是说页面中尽量少的引用外部静态资源，js、css以及图片
- Use a CDN--使用CDN网络，将页面中的静态资源分布到离用户最近的网络节点上
- Add an Expires header--为静态资源文件增加过期时间，让用户通过本地缓存来更快的访问网站
- Gzip components--压缩静态资源内容，减少网络传输时间
- Put CSS at the top--将CSS放在页面头部，能够更快渲染页面
- Put JS at the bottom--将JS放在页面底部，一般情况下JS的下载是阻塞模式的，放在页面顶部会阻塞其他资源的下载
- Avoid CSS expressions--不要使用CSS表达式，因为CSS表达式需要很多资源，有时甚至会造成页面假死
- Make JS and CSS external--将CSS和JS使用外部的独立文件，这点有点和1冲突，但是仔细分析下，并不矛盾
- Reduce DNS lookups--减少DNS查找（这点我后面详细解释下）
- Minify JS--最小化压缩JS，和第4点不同，使用YUI Compressor或者JSMin将JS文件进行分析，将一些变量名变短，去除不必要的空格和符号
- Avoid redirects--避免无意义的跳转
- Remove duplicate scripts--去除重复的脚本，不光是文件，甚至是同功能的函数
- Configure ETags--配置实体标签（要说清楚这个问题就要引申出很多情况，不做展开了）
我们本身的确是使用了CDN，但是YSlow本身无法分析出是否使用了CDN，所以需要在config中设置一下。这样一来除了第8项，其他都是A级。
再看看Safari的网络时间线，除了这个讨厌的、超大的 Google Analytics脚本，本站的资源下载时间基本在1秒内就完成了。
详细解释下YSlow的第9点，减少DNS查找。
通常情况下按照我们的理解，静态资源文件都是放在本站点目录下的。由于以前大家的网络速度都不快，IE浏览器为了防止大量的http请求阻塞了网络连接，所以同一域名下的http请求，只允许2个并发线程，所以这就导致我们看到有的页面的图片是逐步逐步显示出来的。通过Safari的网络时间线工具就能看出来。
显而易见，为了突破这个限制，我们可以增加几个域名，从而增加并发下载，加快速度。
最好的方式是自己指定每个文件的域名，按照i1、i1、i2、i2、i3、i3、i1、i1的排列方式，但是同时还要考虑引用的文件大小，进行合理的排列，这对于团队开发就过于复杂了。我们使用了i1.dpfile.com、i2.dpfile.com和i3.dpfile.com三个域名，然后在每个调用静态资源文件地方都是用函数调用：DianPing.Common.StaticFile("/s/js/g.mt.min.js")，函数会根据文件进行hash，分配一个域名，这样就能最大化的散列静态文件的域名，虽然有缺点，却是比较平衡的方式。
就在我写文章的同时，Figo仔细分析了YSlow的评分标准，找到我们丢失的一分原因，也是因为第9点。第9点满分是100分，YSlow认为一个页面上最合理的是2个以内域名，每增加一个扣除5分，我们的页面有4个域名（www\i1\i2\i3），扣除了10分。这个占总比例的1/12，所以四舍五入，被扣除了1分。（不过我认为这1分还是值得的，页面加速很明显，而且DNS查找是可以缓存哒～～～）
从Safari的网络时间线工具上看到JS（橙色）的加载会阻塞其他资源的下载，所以我打算再独立一个域名j1.dpfile.com，专门加载JS文件。
不管怎么说，总体来说性能还是提升了不少。
现在静态文件使用的是Squid服务器，接下来等存储设备部署完毕，准备使用Nginx，直接提供服务，听说性能会提高不少。
庆祝下！！！
十一月 6th, 2008 at 22:35
强力顶！！99分，太激动人心了，哇哈哈～
十一月 7th, 2008 at 10:54
非常值得赞赏的成绩
十一月 7th, 2008 at 10:56
厉害，点评果然有点手段。
十一月 7th, 2008 at 10:57
我们的目标是----没有蛀牙!
十一月 7th, 2008 at 10:57
庆祝一下，终于发现这一分丢在哪里了
十一月 7th, 2008 at 11:45
很牛啊～
十一月 7th, 2008 at 11:46
厉害的！国内网站典范了！
十一月 7th, 2008 at 12:07
性能为王吧，丢点分数就任它去吧：）
十一月 7th, 2008 at 12:21
13 Configure ETags--配置实体标签（要说清楚这个问题就要引申出很多情况，不做展开了）
想了解一下,dianping是怎么处理这个的,简单的说就是,我不想用ETags,IIS下如何处理..
十一月 7th, 2008 at 16:13
To Dawnxu
可以看看这篇文章
http://www.alcoholwang.com/create_isapi_project_by_visual_studio_2008.htm
十一月 10th, 2008 at 18:00
这么有激情啊。。。
除了这个14个再找找其它的方法
yahoo他们不是又总结出不少的新的点么
十一月 11th, 2008 at 10:12
从Safari的网络时间线工具上看到JS（橙色）的加载会阻塞其他资源的下载，所以我打算再独立一个域名j1.dpfile.com，专门加载JS文件
---
我在想这样是否得到的结果还是相同的呢?
Browser遇到JS就停止了,直到把JS解释完(说成是预编译更好),这时候的block类似于一个syncLock,再加域名似乎也触及不到他的本质吧(除非用户都上支持V8那样的Browser).
十一月 11th, 2008 at 18:06
@shawnliu
一共34条，YSlow精简为13条。因为另外21条中很难作为评分标准来评判。
十一月 20th, 2008 at 14:35
Great website, the information is good, and the content will keep me coming back, thanks again.
十二月 4th, 2008 at 14:52
mootools感觉和prototype很像~~
我觉得jquery很强啊~在处理DOM方面..为什么要换啊?~
十二月 4th, 2008 at 20:20
换jquery并不说明jquery不好，而是某种程度上不符合网站发展的需要。
1.首先jquery很好，特别是dom处理方面，如果是一个人开发的话，jquery无疑是很好的选择。
2.随着前端功能的复杂度的增加，我们需要一个统一的前端架构来维护项目，所以只有一个类jQuery的jquery library显然不符合需要了。
3.可以看看这篇文章：http://ooboy.net/blog/article/588.aspx
十二月 19th, 2008 at 12:37
太牛了！加油！
十二月 19th, 2008 at 14:30
[...] YSlow第九条：这点我在扩展阅读一里面详细阐述了，不重复码字了；（个人认为最重要一点） [...]