网页中包含的资源(图片、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秒钟。
以下是网页加载时的瀑布图:
IE6加载时的瀑布图
Firefox3加载瀑布图
从上图中可以看到,IE6下,前10张图片是并行下载,后2张要在前10张图片下载完成后才开始下载,Firefox下情况比较类似,只不过图片是每6张一组下载。这是因为浏览器限制了同一个域名下最大并行下载数量(或者说最大连接数),当并行下载数到达上限时,其后的http请求就必须排队等待,除了图片外,css、html等网页资源也存在同样的问题。同一域名的最大并行下载数量与浏览器类型、浏览器版本、HTTP版本有关,以下是网上收集的数据,并未核实。
并行下载是加快网页显示非常关键的一项技术,如何多图片的并行下载呢?我们再来看另外一个例子。
多图片并行下载:
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>
再来看看该网页的瀑布图:
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/
相关推荐
AJAX 载入JS文件,载入CSS文件,载入JS函数,执行JS 。ASP应用
JS 页面载入等待特效 javascript JS 页面载入等待特效 javascript
主要介绍了JS实现页面载入时随机显示图片效果,涉及javascript基于随机数与数组的页面元素动态修改相关操作技巧,需要的朋友可以参考下
页面载入等待代码(用javascript技术实现)
pdf.js 是基于开放的 HTML5 及 JavaScript 技术实现的开源产品。简单说就是一个 PDF 解析器。直接在标准的HTML页面上载入和渲染PDF文件, 还可以提高安全性(不需要安装第三方插件,安全性由浏览器保证),浏览器所做...
js 特效 html 特效 倒计时载入页面 js 特效 html 特效 倒计时载入页面
-css(资源公用):单页面为共用,只需要外壳部分加载,多页面则不共用,每个页面单独加载 -刷新方式:单页面页面局部更改或刷新,多页面整页刷新 -url模式:单页面 a.com/#/pageone 多页面 a.com/pageone.html ...
此文件包含图片资源,这个Zip文件有很多图片。 或许你们会期待文件完成传输。 如果文件传输完成,那么快给我点个赞。 此文件分区“有灯——抽奖区,有灯区,有其他,有背景”。 要‘WinsZip登录过的人’收藏一下。 ...
今天我们用JavaScript和CSS3来实现色彩对比度。首先载入两幅相同的图片,然后通过一个水平滑杆来改变其中一幅图片的色彩对比度。这个应用的特点是可以改变图片初始的色彩。类似的jQuery图片对比应用大家还可以看看这...
包含多种HTML页面载入时自动运行JS代码的方法~~
Js载入文件并显示进度条JSLoader
传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不再...
Minify可以按需对JavaScript以及CSS文件进行合并、压缩以及缓存,以加快页面的载入速度。而安装minify则极其简单,只需在网站根目录下上传程序目录即可。
动态载入 JavaScript/Csss 文件 传统加载外部JavaScript(*.js) 或者 Css(*.css)文件的方法是直接在<head>标签里面进行添加: 代码如下: <head> [removed][removed] <link rel=”stylesheet” type=”...
本工具为自己使用ASP.NET(C#)开发的一个网页开发辅助工具,可以输入网址之家提取css代码中的背景图片,并且可以自动获取到网页中包含的css文件地址,点击可以直接载入css代码,也可以复制网页源代码黏贴进去查找。...
一般图片是背景图时,也会无法右击保存,但 CSS PEEPER 却可以加载出所有的图片资源。鼠标悬浮上会出现图片的基本信息。我们点击 "EXPORT"(导出),图片即开始被下载。以后不管多难右击另存为的图,你都可以轻松...
倒计时载入页面.rar倒计时载入页面.rar倒计时载入页面.rar倒计时载入页面.rar倒计时载入页面.rar倒计时载入页面.rar
解决ie下面的css3的兼容问题,直接在使用css3的代码中载入就行了。
本文实例讲述了JS实现文件动态顺序载入的方法。分享给大家供大家参考。具体分析如下: 用script标签实现JS代码的动态载入。 源于JavaScript语言中函数、变量等定义可重复声明(导致覆盖)的特性,载入是按顺序的。 ...