Kev*_*rke 37 browser performance
我想弄清楚是否值得跨多个子域传播图像请求.[本文](链接破碎)例如说:
大多数浏览器一次只能发出两个请求,因此浏览器将请求两个文件,下载它们然后继续下一个.HTTP请求越多,或页面需要正确显示的单独组件,用户必须等待的时间越长.
Ste*_*ham 75
这里有很多事情需要考虑.在大多数情况下,我只会选择一个无cookie的域/子域来托管您的图像,例如static.mywebsite.com.理想情况下,静态文件应由CDN托管,但这是另一个故事.
首先,IE7每个主机只允许两个并发连接.但是今天的大多数浏览器都允许更多.IE8允许6个并发连接,Chrome允许6个,Firefox允许8个.
因此,如果您的网页只有6张图片,那么将图片分布在多个子域中实际上毫无意义.
因此,假设您在页面上有24个图像.嗯,生活中很少有东西是免费的,并且通过并行化就有死亡这样的东西.如果您将图像托管在4个不同的子域中,那么这意味着理论上可以并行下载每个图像.但是,这也意味着还涉及3个额外的DNS查找.DNS查找可能是100毫秒,150毫秒,或有时更长.这种增加的延迟很容易抵消并行下载的任何好处.您可以通过http://www.webpagetest.org/测试网站来查看真实世界的示例.
当然,最好的解决方案是尽可能使用CSS sprites来减少请求数量.我谈论,并在每个请求的固有开销这篇文章和这一个.
UPDATE
Steve Souders有一篇关于分片域名的有趣文章......
美国十大网站中的大多数都进行域分片.YouTube使用i1.ytimg.com,i2.ytimg.com,i3.ytimg.com和i4.ytimg.com.Live Search使用ts1.images.live.com,ts2.images.live.com,ts3.images.live.com和ts4.images.live.com.这两个站点都在四个域中进行分片.什么是最佳数字？雅虎 发布了一项研究,建议在至少两个但不超过四个域中进行分片.四个以上,性能实际上降低了.
http://www.stevesouders.com/blog/2009/05/12/sharding-dominant-domains/
但请注意,这是在2009年写的.2011年,他发表评论......
由于较新的浏览器会为每个域打开更多连接,因此最好向下修改数字.我认为2是一个很好的妥协,但这只是一种预感.如果某些生产资产进行测试以确定最佳数量,那就太棒了.
您还应该记住,雅虎和亚马逊等大型网站进行域分片甚至是必要的一个重要原因是它们的网站非常动态.图像附加到动态显示的产品或故事.因此,对于他们而言,使用CSS精灵并不是最佳的,这是不可行的.
然而,像StackOverflow这样的网站对这些类型的图像很轻松,它们减少了请求的数量,使得它们不需要进行分片.实现这一目标的一大步是使用这个sprites.png图像...
http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.png?v=5
更新#2
Steve Souders发布了关于域分片的另一个更新.他重复了我已经提到的很多内容.但突出的是SPDY以及这应该如何影响你的决定.
也许反对域分片的最强有力的论据是它在SPDY(以及HTTP 2.0)的世界中是不必要的.事实上,域分片可能会损害SPDY下的性能.SPDY支持并发请求(尽早发送所有请求标头)以及请求优先级.对多个域进行分片会降低这些优势.Chrome,Firefox,Opera和IE 11支持SPDY.如果您的流量受这些浏览器支配,您可能希望跳过域分片.
更新#3(2018年2月)
正如Dean在下面的评论中提到的那样,现在的浏览器支持HTTP/2,CSS精灵并没有真正为你买单.但您必须获得SSL证书,设置站点以使用HTTPS,并确保您的Web服务器配置为HTTP/2.要么是这样,要么使用已经拥有所有这些设置的CDN.完成所有这些后,您可以跳过CSS精灵和域分片.
