高性能表现的网站
原文：http://bbs.blueidea.com/thread-2822893-1-1.html
(下面是改动过的文章）
1.减少http请求数
图片，css，script，flash，等等这些都会增加http请求数，减少这些元素的数量能减少响应时间。
CSS Sprites技术能减少图片的请求数，把零散的小图片放到一起，运用background-position来改变背景图片的位置，前提是html元素事先定义好宽高，其实就像一个遮罩，移动背景就会看到不同的景象。
内嵌图像 用data:URL scheme的方式把图片内容代码直接嵌入html代码中，这样会增大html代码的体积，改进的方式是把内嵌图片嵌入到css中（css被缓存），这样就会更好的减少http请求数而且不增大html的体积。
很多用户都是在空缓存的情况下进入你的网站的，这样第一次的速度就会显得很重要。
第一条规则是最重要的一条规则。
2.运用cdn技术
CDN网络加速器
Content Delivery Network，即“内容发布与速递网络”，能为企业站点提供更快速、稳定服务的网络架构。它采取了分布式网络缓存结构（即国际上流行的web cache技术），通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的cache服务器内，通过DNS负载均衡的技术，判断用户来源就近访问cache服务器取得所需的内容，解决Internet网络拥塞状况，提高用户访问网站的响应速度，如同提供了多个分布在各地的加速器，以达到快速、可冗余的为多个网站加速的目的。换句话说，CDN就是让网站访问者可以在离自己最近的地方最快的得到可靠的服务。
中国IT认证实验室(ChinaITLab)，“2004中国商务网站100强网站”网络服务类网站得主之一。
ChinaITLab是国内唯一专业IT教育门户网站，日访问量已超270万人次以上。作为国内知名网络教育机构， ChinaITLab有着遍布国内各个角落的网络会员，网站是保持他们和会员密不可分的沟通枢纽。为此，自成立以来， ChinaITLab的工作人员便选择把服务器放在了国内网络发展发达的深圳，并申请了足够的带宽，以保证每个会员都可以享受他们送出的优质服务。但事与愿违，不少北方的用户反映，在当地要想打开一个 ChinaITLab的页面，就要花上10~15秒的时间，有的甚至打不开。经技术人员确认，用户所反映的问题，是受到中国电信南北分家，南北互联互通问题所造成的影响。有没有可行的技术来解决这一瓶颈呢？
中国电信分家，留下“南北互通”长期隐患。
随着原中国电信集团按南北地域分家，新的中国电信和网通集团随即成立，互联网的骨干网也被一分为二了，北有网通、南有中国电信。此后，细心的网民可能已经发现，有些经常访问的网站速度就一下子慢了下来，有时候还有访问不上去的情况出现。例如北方省份和地区的网络用户访问中国网通IDC的数据时，会非常快，而访问中国电信IDC的数据时，感觉比较慢。除了跨区域的企业网页访问速度慢的问题外，更重要的是影响了企业或个人用户对自己网站管理和维护速度、以及企业邮箱的使用速度。据分析，产生这种问题的原因是中国电信分家之后，骨干网连接存在一定的问题，虽然信息产业部已经在做互联互通的计划并在实施中，但估计在相当长的一段时间内，南北网速差异的问题还会存在。
CDN以特有的CACHE功能，解决了“南北互通”对网站造成的访问影响。
经CDN产品组技术人员研究决定，在www.chinaitlab.com的下载频道率先采用CDN网络加速器解决方法，并联系了沈阳、北京两地的客户收集返回实验数据。于是，西部数码技术人员着手把chinaitlab.com域名的CNAME记录解析成西部数码CACHE的别名记录，这样中国IT认证实验室的域名便被解析对应到了西部数码各CACHE的服务器IP上，再将各CACHE的IP对应到chinaitlab.com空间所在的服务器即可。待 24小时解析时间过后，CDN绑定完成。沈阳、北京两地的测试用户惊奇的发现，原本需要10~15秒才能打开的页面，现在仅需要2~3秒。中国IT认证实验室的问题解决了，南北互通的问题解决了，CDN网络加速期以其出色的表现宣告成功！
3.加一个长时间过期的头部
Expires: Thu, 15 Apr 2010 20:00:00 GMT
浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。
不过这样会带来一个问题，就是如果页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，在yahoo工作组用的是版本号，例如yahoo_2.0.6.js
4.Gzip压缩
Gzip是现在最流行和最有效的压缩方式，她是GNU开发的，RFC1952标准化。
（Gzip是在服务器端压缩图片，css，脚本等，传送到用户端的浏览器再解压，这样可以提高传输速度，不过对服务器的压力会增大，一般选择部分元素压缩比较合适。）
5.把样式表放到顶部
我们发现把css放到文档头部会让网页加载得更快。因为这样可以让页面逐渐加载。
把样式表放到接近底部的问题是它阻止了页面元素的逐渐显示。这样还会导致“flash of unstyled content” 即在样式表加载之前页面内容是以没有样式的形式显示出来的，待加载完样式后，页面重绘，内容一闪即改变了样式表现。
6.把脚本放到底部
把脚本放到尽可能底部的地方，一个原因是让页面逐渐渲染，另一个是实现更好的并行下载。
对于脚本，脚本以下的内容被阻止逐渐加载了，因为只有当下载完脚本以后才会下载下面的内容，第二个脚本引起的问题是阻止平行下载。 "http/1.1 specification"建议浏览器对一个域名，同一时间下载数不超过2个（按：实际监测发现一般有超过2个），我曾经让ie并行下载100个图片。当脚本正在下载的时候，浏览器不会开始下载任何东西。
7.避免css expressions
css expressions 是一个有力（和危险）的方式动态的改变css的属性。他们自ie5就开始被支持，举个例子，用css expression可以让背景色每个小时轮换一次。但是被非ie浏览器忽略的。
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
expressions的问题就在与它的计算频率绝对超出我们的想象，甚至当我们移动鼠标，都会引起页面的重绘！
下面是举例页面
减少css expressions计算次数的一个方法就是使用一次性的expressions。 当第一次expression计算出一个明确的值，就让样式等于这个值，不再变动。如果样式的属性一定要动态的改变，就用时间句柄吧！
8.让脚本和样式外延
Javascript和CSS应该是外部调用还是内嵌呢？
用外部调用文件的方式更快，因为他们是可以被缓存的，如果是内嵌在页面中他们就无法被缓存了！想想如果用户要在你的网站看很多很多的页面，如果都是使用同一个外部脚本和样式，那么他们一旦被缓存，就再也不需要下载了，这样会给你带来很大的潜在好处。
9.减少DNS查询
10.减小脚本体积
有两个比较流行的工具是用来减小脚本的体积的--JSMin和YUI Compressor
（按：这个压缩和Gzip压缩是不一样的，Gzip是传输压缩，这个是代码压缩）
11.避免重定向
重定向会减慢用户体验，它会延迟所有的东西直至到达新页面。一个最浪费的重定向经常会发生而我们的开发者又会经常忽略的就是比如http://astrology.yahoo.com/astrology的结果是重定向到http://astrology.yahoo.com/astrology/ 在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。
从一个旧网站跳转到新网站也是经常要用到重定向，还有就是连接一个网站中的不同部分和在某些情况下（比如不同浏览器，不同的用户帐号类型，等等）的用户导向。用重定向很简单，而且只需要一点额外的代码，虽然在这些情况下用重定向减少了开发者的复杂度，但它降低了用户的体验，变通的做法是用Alias和 mod_rewrite如果两个部分是在同一主机上的话，如果是由域名变更引起的重定向，变通的做法是通过Alias或mod_rewrite创建一个 CNAME（一个DNS记录，创建一个别名，从一个域名指向另一个域名）
12.去掉重复的脚本
（按：简单的说，同一个脚本如果被调用多次，浏览器并不会忽略后续的脚本，而总是覆盖加载，覆盖运行，这样会增加开销）
13.配置ETags
ETags（Entity tags）是服务器和浏览器的一个功能，它用来判断浏览器缓存里的元素是否和原来服务器上的一致。ETags比last-modified date更具有弹性，它用一个独一无二的字符串来标识一个元素的版本。
源服务器用响应头里的ETag来特定一个元素的ETag：
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
之后，如果浏览器要验证这个元素，它就会用If-None-Match头来回传ETag到源服务器。如果符合的话，一个304状态的代码就会从源服务器返回到浏览器，这样源服务器就节省了传输具体数据的开销。
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified
用Etags的问题就在于它会标识那个特定的服务器，如果换了服务器，Etags也就失去了原有的功能，但是这种现在在网络上太常见了，因为我们经常用服务器集群。默认情况下，Apache和IIS会在Etag中内嵌数据，这样会动态减少验证成功的机会。
Apache1.3和2.x的ETag格式是inode-size-timestamp。虽然一个文件可能在不同服务器的同一个目录，同样的大小，安全级，时间戳等等，它的inode会随着服务器的不同而不同。
IIS5.0和6.0有同样类似Etags的东西，叫时间戳：ChangeNumber（更改号），更改号是一个用来追踪IIS配置变化的计数器，ChangeNumber在不同IIS服务器之间是不一样的。
它最终的问题就是，IIS和Apache产生的Etags会在不同服务器之间无法匹配，这样我们的浏览器就无法得到我们期待的304响应，而给我们的是一个普通的200响应，和正常的数据流。如果你的网站只有一个服务器还无所谓，如果是集群，而你用的是默认的ETag配置，你的用户就会获得更慢的页面，你的服务器也会有更高的负载，消耗更大的带宽资源，代理也无法高效缓存你的内容，甚至即使你有一个长时间过期的头部（按：见第三条规则），也不会阻止它重新载入内容。
如果你不想发挥Etags提供的这个弹性验证模型的优势，你最好关掉它。Apache中关掉它的方法是在Apache的配置文件中写这么一句：
FileETag none
14.让Ajax缓存
人们会问这些规则同样适用于web2.0吗？当然！这个规则是我在雅虎工作做web2.0后得出的第一条规则。
Ajax的一个好处是它会给你实时的回馈，因为它和后台的服务器是异步传输的，然而，用Ajax并不能保证你的用户不用无聊的拨弄手指头来等待这个回馈，在很多应用中，用户是否需要等待取决于Ajax是怎么用的，举例说，在一个基于网页的邮件客户端，用户会持续等待Ajax的回馈来搜索符合他的标准的邮件信息。记住“异步”并不意味着“实时”。让它缓存的方式同样是加一个过期头部。
(下面是改动过的文章）
1.减少http请求数
图片，css，script，flash，等等这些都会增加http请求数，减少这些元素的数量能减少响应时间。
CSS Sprites技术能减少图片的请求数，把零散的小图片放到一起，运用background-position来改变背景图片的位置，前提是html元素事先定义好宽高，其实就像一个遮罩，移动背景就会看到不同的景象。
内嵌图像 用data:URL scheme的方式把图片内容代码直接嵌入html代码中，这样会增大html代码的体积，改进的方式是把内嵌图片嵌入到css中（css被缓存），这样就会更好的减少http请求数而且不增大html的体积。
很多用户都是在空缓存的情况下进入你的网站的，这样第一次的速度就会显得很重要。
第一条规则是最重要的一条规则。
2.运用cdn技术
CDN网络加速器
Content Delivery Network，即“内容发布与速递网络”，能为企业站点提供更快速、稳定服务的网络架构。它采取了分布式网络缓存结构（即国际上流行的web cache技术），通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的cache服务器内，通过DNS负载均衡的技术，判断用户来源就近访问cache服务器取得所需的内容，解决Internet网络拥塞状况，提高用户访问网站的响应速度，如同提供了多个分布在各地的加速器，以达到快速、可冗余的为多个网站加速的目的。换句话说，CDN就是让网站访问者可以在离自己最近的地方最快的得到可靠的服务。
中国IT认证实验室(ChinaITLab)，“2004中国商务网站100强网站”网络服务类网站得主之一。
ChinaITLab是国内唯一专业IT教育门户网站，日访问量已超270万人次以上。作为国内知名网络教育机构， ChinaITLab有着遍布国内各个角落的网络会员，网站是保持他们和会员密不可分的沟通枢纽。为此，自成立以来， ChinaITLab的工作人员便选择把服务器放在了国内网络发展发达的深圳，并申请了足够的带宽，以保证每个会员都可以享受他们送出的优质服务。但事与愿违，不少北方的用户反映，在当地要想打开一个 ChinaITLab的页面，就要花上10~15秒的时间，有的甚至打不开。经技术人员确认，用户所反映的问题，是受到中国电信南北分家，南北互联互通问题所造成的影响。有没有可行的技术来解决这一瓶颈呢？
中国电信分家，留下“南北互通”长期隐患。
随着原中国电信集团按南北地域分家，新的中国电信和网通集团随即成立，互联网的骨干网也被一分为二了，北有网通、南有中国电信。此后，细心的网民可能已经发现，有些经常访问的网站速度就一下子慢了下来，有时候还有访问不上去的情况出现。例如北方省份和地区的网络用户访问中国网通IDC的数据时，会非常快，而访问中国电信IDC的数据时，感觉比较慢。除了跨区域的企业网页访问速度慢的问题外，更重要的是影响了企业或个人用户对自己网站管理和维护速度、以及企业邮箱的使用速度。据分析，产生这种问题的原因是中国电信分家之后，骨干网连接存在一定的问题，虽然信息产业部已经在做互联互通的计划并在实施中，但估计在相当长的一段时间内，南北网速差异的问题还会存在。
CDN以特有的CACHE功能，解决了“南北互通”对网站造成的访问影响。
经CDN产品组技术人员研究决定，在www.chinaitlab.com的下载频道率先采用CDN网络加速器解决方法，并联系了沈阳、北京两地的客户收集返回实验数据。于是，西部数码技术人员着手把chinaitlab.com域名的CNAME记录解析成西部数码CACHE的别名记录，这样中国IT认证实验室的域名便被解析对应到了西部数码各CACHE的服务器IP上，再将各CACHE的IP对应到chinaitlab.com空间所在的服务器即可。待 24小时解析时间过后，CDN绑定完成。沈阳、北京两地的测试用户惊奇的发现，原本需要10~15秒才能打开的页面，现在仅需要2~3秒。中国IT认证实验室的问题解决了，南北互通的问题解决了，CDN网络加速期以其出色的表现宣告成功！
3.加一个长时间过期的头部
Expires: Thu, 15 Apr 2010 20:00:00 GMT
浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。
不过这样会带来一个问题，就是如果页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，在yahoo工作组用的是版本号，例如yahoo_2.0.6.js
4.Gzip压缩
Gzip是现在最流行和最有效的压缩方式，她是GNU开发的，RFC1952标准化。
（Gzip是在服务器端压缩图片，css，脚本等，传送到用户端的浏览器再解压，这样可以提高传输速度，不过对服务器的压力会增大，一般选择部分元素压缩比较合适。）
5.把样式表放到顶部
我们发现把css放到文档头部会让网页加载得更快。因为这样可以让页面逐渐加载。
把样式表放到接近底部的问题是它阻止了页面元素的逐渐显示。这样还会导致“flash of unstyled content” 即在样式表加载之前页面内容是以没有样式的形式显示出来的，待加载完样式后，页面重绘，内容一闪即改变了样式表现。
6.把脚本放到底部
把脚本放到尽可能底部的地方，一个原因是让页面逐渐渲染，另一个是实现更好的并行下载。
对于脚本，脚本以下的内容被阻止逐渐加载了，因为只有当下载完脚本以后才会下载下面的内容，第二个脚本引起的问题是阻止平行下载。 "http/1.1 specification"建议浏览器对一个域名，同一时间下载数不超过2个（按：实际监测发现一般有超过2个），我曾经让ie并行下载100个图片。当脚本正在下载的时候，浏览器不会开始下载任何东西。
7.避免css expressions
css expressions 是一个有力（和危险）的方式动态的改变css的属性。他们自ie5就开始被支持，举个例子，用css expression可以让背景色每个小时轮换一次。但是被非ie浏览器忽略的。
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
expressions的问题就在与它的计算频率绝对超出我们的想象，甚至当我们移动鼠标，都会引起页面的重绘！
下面是举例页面
减少css expressions计算次数的一个方法就是使用一次性的expressions。 当第一次expression计算出一个明确的值，就让样式等于这个值，不再变动。如果样式的属性一定要动态的改变，就用时间句柄吧！
8.让脚本和样式外延
Javascript和CSS应该是外部调用还是内嵌呢？
用外部调用文件的方式更快，因为他们是可以被缓存的，如果是内嵌在页面中他们就无法被缓存了！想想如果用户要在你的网站看很多很多的页面，如果都是使用同一个外部脚本和样式，那么他们一旦被缓存，就再也不需要下载了，这样会给你带来很大的潜在好处。
9.减少DNS查询
10.减小脚本体积
有两个比较流行的工具是用来减小脚本的体积的--JSMin和YUI Compressor
（按：这个压缩和Gzip压缩是不一样的，Gzip是传输压缩，这个是代码压缩）
11.避免重定向
重定向会减慢用户体验，它会延迟所有的东西直至到达新页面。一个最浪费的重定向经常会发生而我们的开发者又会经常忽略的就是比如http://astrology.yahoo.com/astrology的结果是重定向到http://astrology.yahoo.com/astrology/ 在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。
从一个旧网站跳转到新网站也是经常要用到重定向，还有就是连接一个网站中的不同部分和在某些情况下（比如不同浏览器，不同的用户帐号类型，等等）的用户导向。用重定向很简单，而且只需要一点额外的代码，虽然在这些情况下用重定向减少了开发者的复杂度，但它降低了用户的体验，变通的做法是用Alias和 mod_rewrite如果两个部分是在同一主机上的话，如果是由域名变更引起的重定向，变通的做法是通过Alias或mod_rewrite创建一个 CNAME（一个DNS记录，创建一个别名，从一个域名指向另一个域名）
12.去掉重复的脚本
（按：简单的说，同一个脚本如果被调用多次，浏览器并不会忽略后续的脚本，而总是覆盖加载，覆盖运行，这样会增加开销）
13.配置ETags
ETags（Entity tags）是服务器和浏览器的一个功能，它用来判断浏览器缓存里的元素是否和原来服务器上的一致。ETags比last-modified date更具有弹性，它用一个独一无二的字符串来标识一个元素的版本。
源服务器用响应头里的ETag来特定一个元素的ETag：
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
之后，如果浏览器要验证这个元素，它就会用If-None-Match头来回传ETag到源服务器。如果符合的话，一个304状态的代码就会从源服务器返回到浏览器，这样源服务器就节省了传输具体数据的开销。
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified
用Etags的问题就在于它会标识那个特定的服务器，如果换了服务器，Etags也就失去了原有的功能，但是这种现在在网络上太常见了，因为我们经常用服务器集群。默认情况下，Apache和IIS会在Etag中内嵌数据，这样会动态减少验证成功的机会。
Apache1.3和2.x的ETag格式是inode-size-timestamp。虽然一个文件可能在不同服务器的同一个目录，同样的大小，安全级，时间戳等等，它的inode会随着服务器的不同而不同。
IIS5.0和6.0有同样类似Etags的东西，叫时间戳：ChangeNumber（更改号），更改号是一个用来追踪IIS配置变化的计数器，ChangeNumber在不同IIS服务器之间是不一样的。
它最终的问题就是，IIS和Apache产生的Etags会在不同服务器之间无法匹配，这样我们的浏览器就无法得到我们期待的304响应，而给我们的是一个普通的200响应，和正常的数据流。如果你的网站只有一个服务器还无所谓，如果是集群，而你用的是默认的ETag配置，你的用户就会获得更慢的页面，你的服务器也会有更高的负载，消耗更大的带宽资源，代理也无法高效缓存你的内容，甚至即使你有一个长时间过期的头部（按：见第三条规则），也不会阻止它重新载入内容。
如果你不想发挥Etags提供的这个弹性验证模型的优势，你最好关掉它。Apache中关掉它的方法是在Apache的配置文件中写这么一句：
FileETag none
14.让Ajax缓存
人们会问这些规则同样适用于web2.0吗？当然！这个规则是我在雅虎工作做web2.0后得出的第一条规则。
Ajax的一个好处是它会给你实时的回馈，因为它和后台的服务器是异步传输的，然而，用Ajax并不能保证你的用户不用无聊的拨弄手指头来等待这个回馈，在很多应用中，用户是否需要等待取决于Ajax是怎么用的，举例说，在一个基于网页的邮件客户端，用户会持续等待Ajax的回馈来搜索符合他的标准的邮件信息。记住“异步”并不意味着“实时”。让它缓存的方式同样是加一个过期头部。
- 没有相关文章
- 没有评论
