Недавно я обнаружил, что мобильное сафари (на iOS 9.1 - хотя и не уверены в более старых версиях сафари) имеет неприятную проблему с несколькими соединениями и изображениями. Если у вас шесть изображений при загрузке страницы, это задерживает XHR-запросы, которые загружаются после этих шести изображений с огромным временем задержки (порядка 30 секунд).Преодоление ограничения соединения с мобильным сафари
Например, я загрузил следующее, используя стандартный сервер NodeJS/Express, и увидел гигантские задержки перед появлением оповещения - несмотря на то, что все изображения на нем всего лишь несколько КБ, и я могу заметно видеть, что все они загружен. Консоль dev также показывает загруженные изображения, но не запрос XHR. Продолжительность загрузки файла была очень мала, но латентность была огромной.
Это не проблема ни в каких других браузерах (мобильный хром, обычное сафари и т. Д.).
Sample проблема 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>Странная вещь, если вы запускали запрос XHR ДО было 6 изображений, он будет работать отлично. На самом деле, если вы даже сделали что-то вроде этого ниже, все было в порядке. Я думаю, что это работает, потому что фоновый CSS-образ должен получить URL-адрес после запуска XHR.
Заменить один из Img тегов с фоном CSS изображение и оно работает:
<!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>кто-нибудь сталкивался с этим проблемы и выяснили способ борьбы с ним, не уменьшая количество изображений или помещая их в спрайт или что-то еще?
Обнаружена такая же вещь, однако решения пока нет. То же самое на ios 9.2 –
@MaxTheCat См. Ниже решение, которое я использовал. Надеюсь, это поможет. – wlingke