我正在试图弄清楚是否值得跨多个子域传播图像请求。 [本文](链接已损坏)例如说:
大多数浏览器一次只能发出两个请求,因此浏览器会请求两个文件,下载它们然后转到接下来的两个文件。 HTTP请求越多,或者页面需要正确显示的单独组件,用户必须等待的时间越长。
当他们说大多数时,特别是哪些浏览器?该数字是否与并发XMLHttpRequests的数量相关,每this question?
答案 0 :(得分:74)
这里有很多事情需要考虑。在大多数情况下,我只会选择一个无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精灵来减少请求的数量。我在this article和this one中讨论了这一点以及每个请求的固有开销。
<强>更新强>
Steve Souders有一篇关于分片域名的有趣文章......
美国十大网站中的大多数都进行域分片。 YouTube使用 i1.ytimg.com,i2.ytimg.com,i3.ytimg.com和i4.ytimg.com。生活 搜索使用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发布了another update on domain sharding。他重复了我已经提到的很多内容。但突出的是SPDY以及它应该如何影响你的决定。
也许反对域分片的最强有力的论据就是它 在SPDY世界(以及HTTP 2.0)中不必要的。事实上, 域分片可能会损害SPDY下的性能。 SPDY支持 并发请求(尽早发送所有请求标头)以及 请求优先顺序。跨多个域的分片减少 这些好处。 Chrome,Firefox,Opera和IE都支持SPDY 11.如果您的流量受这些浏览器控制,您可能希望跳过域分片。
更新#3(2018年2月)
正如Dean在下面的评论中所提到的,现在浏览器支持HTTP / 2时,CSS精灵并不是真的非常喜欢你。但您必须获得SSL证书,设置站点以使用HTTPS,并确保您的Web服务器配置为HTTP / 2。要么是这样,要么使用已经拥有所有这些设置的CDN。完成所有这些后,您可以跳过CSS精灵和域分片。
答案 1 :(得分:1)