Question

我最近发现移动safari（在iOS 9.1上 - 虽然不确定较旧的safari版本）但是有多个连接和图像的不幸问题。如果您在加载页面时有六个图像，它将延迟在这六个图像之后加载的XHR请求延迟很长的时间（30秒）。

例如，我使用标准NodeJS / Express服务器加载了以下内容，并在警报出现之前看到了巨大的延迟 - 尽管所有图像都只有几KB，我可以看到它们全部被加载。开发控制台还显示加载的图像，但不显示XHR请求。下载文件所用的时间非常短，但延迟很大。

这在任何其他浏览器上都不是问题（移动浏览器，常规游戏等）。

示例问题html：

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<img src="/static/images/home/payment.png">
<img src="/static/images/home/couple-present-mobile.jpg">
<img src="/static/images/general/welcome.jpg">
<img src="/static/images/general/arrow-down.png">
<img src="/static/images/general/arrow-right.png">
<img src="/static/images/general/check.png">
<script>
    
            var url = '/static/test.html'
            var xhr = new XMLHttpRequest();
            xhr.open('GET', encodeURI(url));

            xhr.onload = function() {
                  alert(url) //This takes forever
            };
            xhr.send();

</script>
</body>
</html>

奇怪的是，如果您在有6张图像之前运行XHR请求，它将完美地运行。事实上，如果你甚至做了下面这样的事情，那很好。我认为这是有效的，因为后台CSS图像必须在启动XHR后检索URL。

用背景css图像替换其中一个img标签，它可以正常工作：

<!DOCTYPE html>
<html>
<head>

    <style>
        .test {
            background-image: url("/static/images/home/check.png");
            height: 400px;
        }
    </style>

</head>
<body>

<img src="/static/images/home/payment.png">
<img src="/static/images/home/couple-present-mobile.jpg">
<img src="/static/images/general/welcome.jpg">
<img src="/static/images/general/arrow-down.png">
<img src="/static/images/general/arrow-right.png">
<!--<img src="/static/images/general/check.png">   REMOVE THIS LINE and add the background image instead--> 
  <div class="test"></div>
<script>
            var url = '/static/test.html;

            var xhr = new XMLHttpRequest();
            xhr.open('GET', encodeURI(url));

            xhr.onload = function() {
                console.log(url) //NO DELAYS!
            };
            xhr.send();
</script>
</body>
</html>

此外，我发现仅运行7个同时发生的XHR请求也不会导致此问题（如下所示）：

<!DOCTYPE html>
<html>
<head>


</head>
<body>


<script>
    var urls = ['/static/images/home/payment.png',
        '/static/images/home/couple-present-mobile.jpg',
        '/static/images/general/arrow-right.png',
        '/static/images/general/arrow-down.png',
        '/static/images/general/welcome.jpg',
        '/static/images/general/check.png',
        '/static/test.html'];

    for(var i = 0, ii = urls.length; i < ii; i++){
        (function(){
            var url = urls[i];

            var xhr = new XMLHttpRequest();
            xhr.open('GET', encodeURI(url));

            xhr.onload = function() {
                console.log(url)
            };
            xhr.send();
        })()
    }




</script>
</body>
</html>

有没有人遇到过这个问题并想出办法处理它而不减少图像数量或将它们放入精灵或什么东西？

Answer 1

我最终用来解决这个问题的方法是从不同的主机加载图像。为简单起见，如果浏览器检测到主机为www.domain.com，我会从domain.com加载图像，反之亦然。您也可以将所有图片都来自某个主机，例如images.domain.com，并将您的api和其他内容保存在其他主机上。

不是最理想或最优雅的解决方案，但其实施起来非常简单并解决了问题。

克服移动游猎的连接限制

1 个答案: