WEB性能提升规则 High Performance Web Sites
[ 2010-04-27 12:33:38 | Author: zhenhua ]
High Performance Web Sites - yahoo14条
由谁提出的
来自Yahoo! Exceptional Performance team
什么时候开始发起的
2004年开始研究，2007年4月开始，陆续发布,(5月,7月,9月)
为什么
Yahoo希望对自己的产品性能做出一些测量和改善
成绩
总结出14条提升WEB产品性能的准则（后续21条）
第一条：最小化HTTP请求(Frontend)
将CSS文件和JS文件合并（可行性不高）
CSS Sprites
Image Maps(很久以前经常使用的“热区”)
Inline Images,data:URL（浏览器兼容问题）
每天大概有40-60%的访问者去到我们的站点的时候都是empty cache，所以，
我们如果能够使得他们在第一次访问时速度更快，那对他们来说将获得很好的体验。
第二条：使用内容分发网络 (Server)
将静态文件分发到其他独立的服务器上。
目的：使得用户可以就近获取到静态文件，从而解决动态内容站点网络拥挤的状况，提高用户访问网站的响应速度。
Performance Golden Rule:
80-90%的用户响应时间都花费在了下载某个页面上的组件上，
如：images,stylesheets,scripts,flash等等，而这些文件都是静态的，完全可以分发出去。
CDN很昂贵，可以租用，也可以退而求其次，采用部署多台Server进行反向代理
第三条：设置一个 Expires头(Server)
静态文件：永不过期
动态文件：适当设置"Cache-Control"头
现在的WEB页面设计越来越丰富，这也意味着页面上会有越来越多的script,stylesheets,images,flash等等
用户在第一次访问我们的站点时，会发出若干请求，但再次访问时或者继续访问其他页面时，
如果这些文件设置了Expires头，就可以避免再次为它们发出新的HTTP请求，
从而提高页面加载速度，减轻服务器压力，提升用户体验。
第四条：Gzip压缩静态文件(Server)
为所有静态文件开启GZip
压缩文件，节约带宽，提高下载速度
第五条：将样式表放置在源文件的顶部 (Frontend)
将所有样式文件放置在接近源文件顶部的<head>标签内
页面按加载进度逐步渲染，给予访问者视觉上的反馈，尤其是内容较大，网速较慢的访问者，尤为明显。
第六 条：将Script脚本放置在源文件底部(Frontend)
在第二条中提到浏览器在同一主机上平行下载的进程是有限制的，HTTP/1.1规范中指定的是两个。
如果在页面下载进程中遇到了Scripts的下载，则它会将这种平行下载阻断，导致页面加载更慢。
第七 条：避免使用CSS表达式(Frontend)
不兼容
监听评估导致页面性能低下，移动一次鼠标可能导致超过10,000次的评估。
第八条：将JavaScript和CSS全部放置到外部文件 进行调用(Frontend)
减小主文件大小，加快page加载速度
对XHTML进行兼容
可作为静态文件分发到CDN
可缓存
可共用
第九条：减少DNS查询 （Frontend）
Domain Name System，域名系统，它将主机映射到某个IP地址。
当我们输入一个网址的时候，DNS会分析该网址，然后转换到具体的IP，这个过程大概会花20-120毫秒
显然，如果DNS的查找能够进行缓存，将会提高站点的访问速度。
当我们访问一个页面时，该页的URL，images,script,stylesheet,flash等等都会有一个DNS查询的过程
如果我们能够减少该页面上出现多个不同的主机地址，就可以减少DNS的查询
这样就会和之前讲到的平行下载有冲突，减少DNS查询会减少页面响应时间，
但是降低了平行下载数量，则会增大页面响应时间，
平衡的做法是，将所有静态文件分离到至少1个独立的主机，最多不超过4个。
第十条：最小化 JavaScript和CSS
将JavaScript和CSS中任何多余的字符移除，如：注释，换行，排版用的空格等等
减少文件大小，加速下载进度。
第十一条：避免重定向(Frontend)
重定向将导致用户响应时间增加
使用具体的URL
如果一定要重定向，可使用标准的3xx HTTP状态码
第 十二条：移除重复的脚本
使用外部脚本文件
引入这些脚本文件时给文件名加上版本号
<script type="text/javascript" src="menu_1.0.17.js"></script>
养成提取公共方法，公共类的习惯
在编码的过程中，如果发现某段代码至少有两个地方用到，而且代码量挺大的，
就可以考虑将这部分代码提取成为公共的方法，在编写CSS的时候同样适用。
第十三条：配置ETag
ETag，Entity tags的简称，
它用来确定在浏览器向服务端请求一个组件时判断缓存的组件与服务器上的是否仍然还是同一份（即没有更改过）。
Entity，其实就是“组件”的另一种说法，也就是images,scripts,stylesheets等等这些东西。
ETag的值由 INode（索引节点）, Size和MTime（最后修改时间）决定。
由于这个INode在不同的服务器上是不同的，所以导致同一个组件会有不同的ETag，
这就使得该组件不能发送304的状态，没有办法被用户缓存
由于这个原因，在大型多服务器的站点，一般建议将ETag配置关闭
如果可以保证各服务器对同一组件生成相同的ETag，则完全可以使用。
第十四条：缓存AJAX请求
根据业务类型，为处理AJAX请求的Action文件的设置合适的到期时间
动态更新AJAX请求的URL，如，给这个URL后面加上一个更新时间，如：
&t=1190241612，只在请求的数据发生变化时动态修改该URL地址。
来源 v-ec.com
Comments Feed: http://www.zhenhua.org/feed.asp?q=comment&id=702
Trackback URL: http://www.zhenhua.org/trackback.asp?id=702
由谁提出的
来自Yahoo! Exceptional Performance team
什么时候开始发起的
2004年开始研究，2007年4月开始，陆续发布,(5月,7月,9月)
为什么
Yahoo希望对自己的产品性能做出一些测量和改善
成绩
总结出14条提升WEB产品性能的准则（后续21条）
第一条：最小化HTTP请求(Frontend)
将CSS文件和JS文件合并（可行性不高）
CSS Sprites
Image Maps(很久以前经常使用的“热区”)
Inline Images,data:URL（浏览器兼容问题）
每天大概有40-60%的访问者去到我们的站点的时候都是empty cache，所以，
我们如果能够使得他们在第一次访问时速度更快，那对他们来说将获得很好的体验。
第二条：使用内容分发网络 (Server)
将静态文件分发到其他独立的服务器上。
目的：使得用户可以就近获取到静态文件，从而解决动态内容站点网络拥挤的状况，提高用户访问网站的响应速度。
Performance Golden Rule:
80-90%的用户响应时间都花费在了下载某个页面上的组件上，
如：images,stylesheets,scripts,flash等等，而这些文件都是静态的，完全可以分发出去。
CDN很昂贵，可以租用，也可以退而求其次，采用部署多台Server进行反向代理
第三条：设置一个 Expires头(Server)
静态文件：永不过期
动态文件：适当设置"Cache-Control"头
现在的WEB页面设计越来越丰富，这也意味着页面上会有越来越多的script,stylesheets,images,flash等等
用户在第一次访问我们的站点时，会发出若干请求，但再次访问时或者继续访问其他页面时，
如果这些文件设置了Expires头，就可以避免再次为它们发出新的HTTP请求，
从而提高页面加载速度，减轻服务器压力，提升用户体验。
第四条：Gzip压缩静态文件(Server)
为所有静态文件开启GZip
压缩文件，节约带宽，提高下载速度
第五条：将样式表放置在源文件的顶部 (Frontend)
将所有样式文件放置在接近源文件顶部的<head>标签内
页面按加载进度逐步渲染，给予访问者视觉上的反馈，尤其是内容较大，网速较慢的访问者，尤为明显。
第六 条：将Script脚本放置在源文件底部(Frontend)
在第二条中提到浏览器在同一主机上平行下载的进程是有限制的，HTTP/1.1规范中指定的是两个。
如果在页面下载进程中遇到了Scripts的下载，则它会将这种平行下载阻断，导致页面加载更慢。
第七 条：避免使用CSS表达式(Frontend)
不兼容
监听评估导致页面性能低下，移动一次鼠标可能导致超过10,000次的评估。
第八条：将JavaScript和CSS全部放置到外部文件 进行调用(Frontend)
减小主文件大小，加快page加载速度
对XHTML进行兼容
可作为静态文件分发到CDN
可缓存
可共用
第九条：减少DNS查询 （Frontend）
Domain Name System，域名系统，它将主机映射到某个IP地址。
当我们输入一个网址的时候，DNS会分析该网址，然后转换到具体的IP，这个过程大概会花20-120毫秒
显然，如果DNS的查找能够进行缓存，将会提高站点的访问速度。
当我们访问一个页面时，该页的URL，images,script,stylesheet,flash等等都会有一个DNS查询的过程
如果我们能够减少该页面上出现多个不同的主机地址，就可以减少DNS的查询
这样就会和之前讲到的平行下载有冲突，减少DNS查询会减少页面响应时间，
但是降低了平行下载数量，则会增大页面响应时间，
平衡的做法是，将所有静态文件分离到至少1个独立的主机，最多不超过4个。
第十条：最小化 JavaScript和CSS
将JavaScript和CSS中任何多余的字符移除，如：注释，换行，排版用的空格等等
减少文件大小，加速下载进度。
第十一条：避免重定向(Frontend)
重定向将导致用户响应时间增加
使用具体的URL
如果一定要重定向，可使用标准的3xx HTTP状态码
第 十二条：移除重复的脚本
使用外部脚本文件
引入这些脚本文件时给文件名加上版本号
<script type="text/javascript" src="menu_1.0.17.js"></script>
养成提取公共方法，公共类的习惯
在编码的过程中，如果发现某段代码至少有两个地方用到，而且代码量挺大的，
就可以考虑将这部分代码提取成为公共的方法，在编写CSS的时候同样适用。
第十三条：配置ETag
ETag，Entity tags的简称，
它用来确定在浏览器向服务端请求一个组件时判断缓存的组件与服务器上的是否仍然还是同一份（即没有更改过）。
Entity，其实就是“组件”的另一种说法，也就是images,scripts,stylesheets等等这些东西。
ETag的值由 INode（索引节点）, Size和MTime（最后修改时间）决定。
由于这个INode在不同的服务器上是不同的，所以导致同一个组件会有不同的ETag，
这就使得该组件不能发送304的状态，没有办法被用户缓存
由于这个原因，在大型多服务器的站点，一般建议将ETag配置关闭
如果可以保证各服务器对同一组件生成相同的ETag，则完全可以使用。
第十四条：缓存AJAX请求
根据业务类型，为处理AJAX请求的Action文件的设置合适的到期时间
动态更新AJAX请求的URL，如，给这个URL后面加上一个更新时间，如：
&t=1190241612，只在请求的数据发生变化时动态修改该URL地址。
来源 v-ec.com
Comments Feed: http://www.zhenhua.org/feed.asp?q=comment&id=702
Trackback URL: http://www.zhenhua.org/trackback.asp?id=702
There is no comment on this article.
| If you feel this site you find this information helpful, please click on the donation, which is voluntary,Thank you. |
