将图像请求路由到单独的子域

时间:2009-06-12 23:38:05

标签: http browser image performance subdomain

首先,一些背景信息:

  

HTTP 1.1规范,大约在1999年,建议浏览器和服务器将对同一主机名的并行请求限制为两个。 (的 more

如果你继续阅读那篇文章,作者建议通过让多个子域名都指向同一个东西来“欺骗”浏览器。

如果我要从两个独立的子域(两个不同的主机名)提供我的图像,那么浏览器将最多并行下载4个图像(每个主机名2个)。

鉴于此,我现在可以在两个子域之间平均分配请求以优化页面下载速度,如下所示:

<img src="http://subdomain1.example.com/img1.jpg" />
<img src="http://subdomain2.example.com/img2.jpg" />
<img src="http://subdomain1.example.com/img3.jpg" />
<img src="http://subdomain2.example.com/img4.jpg" />

这需要我手动浏览相应的文件并更改每个图像的'src'。


我正在寻找一种更简单/可重用的解决方案,它不会对HTML进行任何可见的更改。

我有个主意:

  1. [example.com]上的所有类似图像的URL都被重定向(通过.htaccess)到[example.com/imghandler.php]
  2. imghandler.php重定向到subdomain1或subdomain2 - 随机选择。
  3. 举例说明:

    # Request from browser:
    >> http://example.com/dir/image.jpg
    
    # Rewritten to:
    >> http://example.com/imghandler.php?location=%2Fdir%2Fimage.jpg
    
    # *Redirects* to either:
        1:
            >> http://subdomain1.example.com/dir/image.jpg
               (this is where the browser ends up getting the image from)
        2:
            >> http://subdomain2.example.com/dir/image.jpg
               (this is where the browser ends up getting the image from)
    

    我有两个问题:

    1. 从理论的角度来看,这会有效吗?
    2. 有没有更好的方法来实现我的目标?

3 个答案:

答案 0 :(得分:5)

要记住这样的策略要注意的是,您希望将同一文件的请求定向到同一服务器。要求:

请求没什么好处
http://subdomain1.example.com/img1.jpg
http://subdomain2.example.com/img2.jpg
http://subdomain1.example.com/img3.jpg
http://subdomain2.example.com/img4.jpg

然后在一页上:

http://subdomain2.example.com/img1.jpg
http://subdomain1.example.com/img2.jpg
http://subdomain2.example.com/img3.jpg
http://subdomain1.example.com/img4.jpg

在下一个。

我们在这里使用的技巧是散列文件名(C#中的GetHashCode)并使用它来选择存储桶:

var serverNumber = image.GetHashCode() % serverCount;

这可以确保从浏览器的缓存中提供对同一图像的进一步请求,而不是由其他服务器提供。

答案 1 :(得分:0)

最好只将所有图像放在1台服务器上,而不是每个图像必须有2个请求。

如果你有动态页面内容(即看起来你使用的是php),你可以通过创建一个同样的东西来获得相同的效果并直接在html中对子域进行编码。您的图片代码可能如下所示:

<img src="<?php echo image_root(); ?>/dir/image.jpg">

您应该可以使用一个不错的编辑器和一些正则表达式搜索和替换来全局地将这种更改应用到您的网站。

答案 2 :(得分:0)

  1. 是。它会工作。但是你最终会得到两倍的请求,但是第一个要求通过2×2主域重定向的请求仍然瓶颈。

  2. 您可以尝试使用JavaScript(也就是jQuery)在图像实际开始加载之前快速更改DOM的ready事件中的图像源。您希望使用一致的方法来计算要使用的子域选项,以便引用相同图像的未来页面可以更改相同的子域选项。