载入页面时使用多域名实现资源并行下载。图片，js、css文件等

网页中包含的资源（图片、js、css、iframe等）引起的http请求基本上都来源于同一个域名，有的网站对静态资源文件使用了独立的无cookie域名。YSlow提倡的高性能网站准则中有一条“reduce DNS lookups”，减少域名数量以便减少域名解析所需要的时间，但是，有的情况下，适当的增加网页中使用的域名数却可以提升网页的速度。

首先，我们来看一个例子：
图片下载被阻塞：
http://blog.tugai.net/performance/sharding_dominant_domain/block_download.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <title>block image download</title>  </head>  <body>   <p>只有前10张图片（IE，Firefox前6张）并行下载。</p>   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=1" />   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=2" />   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=3" />   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=4" />   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=5" />   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=6" />   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=7" />   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=8" />   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=9" />   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=10" />   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=11" />   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=12" />  </body>  </html>

在这个例子中，网页包含12张图片，每张图片加载需要4秒钟。
以下是网页加载时的瀑布图：
载入页面时使用多域名实现资源并行下载。图片，js、css文件等
IE6加载时的瀑布图

Firefox3加载瀑布图

从上图中可以看到，IE6下，前10张图片是并行下载，后2张要在前10张图片下载完成后才开始下载，Firefox下情况比较类似，只不过图片是每6张一组下载。这是因为浏览器限制了同一个域名下最大并行下载数量（或者说最大连接数），当并行下载数到达上限时，其后的http请求就必须排队等待，除了图片外，css、html等网页资源也存在同样的问题。同一域名的最大并行下载数量与浏览器类型、浏览器版本、HTTP版本有关，以下是网上收集的数据，并未核实。
载入页面时使用多域名实现资源并行下载。图片，js、css文件等

并行下载是加快网页显示非常关键的一项技术，如何多图片的并行下载呢？我们再来看另外一个例子。
多图片并行下载：
http://blog.tugai.net/performance/sharding_dominant_domain/parallel_download.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <title>parallel image download</title>  </head>  <body>   <p>所有图片并行下载。</p>   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=1" />   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=2" />   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=3" />   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=4" />   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=5" />   <img src="http://blog.tugai.net/performance/mime.php?type=img&v=6" />   <img src="http://blog1.tugai.net/performance/mime.php?type=img&v=7" />   <img src="http://blog1.tugai.net/performance/mime.php?type=img&v=8" />   <img src="http://blog1.tugai.net/performance/mime.php?type=img&v=9" />   <img src="http://blog1.tugai.net/performance/mime.php?type=img&v=10" />   <img src="http://blog1.tugai.net/performance/mime.php?type=img&v=11" />   <img src="http://blog1.tugai.net/performance/mime.php?type=img&v=12" />  </body>  </html>

再来看看该网页的瀑布图：
载入页面时使用多域名实现资源并行下载。图片，js、css文件等
IE6加载瀑布图

Firefox3加载瀑布图

上例中已经实现了多图片的并行下载，网页加载时间从7.9s减少到4s，速度提升了一倍。从源代码中可以看到，图片使用了不同的域名，每个域名连接的图片不超过6张。本例的关键技术就是使用了多域名来区分资源（包括图片、css等）。

IP和域名

“每台服务器的最大连接数”，这里说的服务器是指的URL地址中的域名，而不是服务器的IP地址，所以，同一IP、不同域名会被看成不同的服务器。利用Apache的ServerAlias可以很方便的在同一域名下增加多个别名域名，相应的，在域名解析时只需要添加一个别名的CNAME记录即可。

多少个域名合适

在前面的内容中你已经看到了，两个域名比一个域名好，三个域名是否会比两个域名好呢？10个域名呢？YSlow的开发者、Yahoo网页性能专家Steve Souders在他的性能研究报告中指出，从一个域名增加到两个域名，网站性能能够得到提升，当域名大于两个时，会对网页加载时间产生负面影响。这个问题的最终答案是域名的数量与网页资源的数量、体积有关，但是，按着经验来说，两个足以。

如何划分资源

如何给指定的资源分配多域名中的一个域名呢？非常关键的一条原则是保证一个资源在分配时总是分配到固定的一个域名，这样，如果资源已经在浏览器缓存了的话，下次访问时就可以在缓存中读取，避免从其他域名再次下载资源。其中一种方法是，使用哈希函数转换资源的文件名为整数，再根据约定的算法选择域名。

当然，手动指定是最原始但有效的方法。

from http://wzfjesun.blog.163.com/blog/static/14245693920124148239436/

载入页面时使用多域名实现资源并行下载。图片，js、css文件等

相关推荐