Клиентская оптимизация

индекс
163,90

Загрузка скриптов браузерами: вести с полей

Как справляются браузеры с параллельной загрузкой скриптов?

Во времена IE7 и Firefox 2.0 ни один браузер не загружал скрипты параллельно с другими ресурсами. Вместо этого старые браузеры блокировали все последующие запросы до полной загрузки, парсинга и выполнения скрипта. Вот так выглядел лог HTTP-запросов при подобной блокировке в старых браузерах:

HTTP-запросы

На тестовой странице, по которой была сгенерирована данная диаграмма, есть шесть HTTP-запросов:
  • HTML-документ;
  • первый скрипт — 2 секунды на скачивание, 2 секунды на выполнение;
  • второй скрипт — 2 секунды на скачивание, 2 секунды на выполнение;
  • картинка — 1 секунда на скачивание;
  • стилевой файл — 1 секунда на скачивание;
  • iframe — 1 секунда на скачивание.

На диаграмме видно, как скрипты блокируют друг друга, а также картинку, стилевой файл и iframe. Последние загружаются параллельно друг другу, но только после того, как завершена последовательная загрузка скриптов.

Скорее всего, причиной последовательной загрузки скриптов в старых браузерах являлось сохранение порядка выполнения. Это критично, когда код во втором скрипте зависит от переменных в первом. Сохранение порядка выполнения решает проблему неопределённых переменных. Однако очевидна упущенная выгода — пока браузер загружает первый скрипт и гарантирует его выполнение первым, он мог бы параллельно загружать остальные четыре ресурса.

Слава новым браузерам, они загружают скрипты параллельно!

Это большая победа для современных веб-приложений, часто состоящих из 100K+ яваскрипт-кода, разделённого на несколько файлов. Загрузка той же самой страницы в IE8, Firefox 3.6, Chrome 4 и Safari 4 приводит к следующей диаграмме:

HTTP-запросы

Положение вещей улучшилось, однако не настолько, насколько могло бы. В данном случае IE8 загружает два скрипта и стилевой файл параллельно, но картинка и iframe заблокированы. Во всех современных браузерах есть похожие ограничения, связанные с типами ресурсов, которые могут грузиться параллельно со скриптами. В таблице из Browserscope показан прогресс в этом вопросе на текущий момент. Кнопка «Compare», недавно добавленная в Browserscope, облегчила составление таких отчётов.

Сравнение браузеров

При загрузке скриптов IE8 всё ещё блокирует картинки и iframe. Chrome 4, Firefox 3.6 и Safari 3.6 блокируют только iframe. Opera 10.10 блокирует все типы ресурсов. Уверен, параллельная загрузка скриптов будет совершенствоваться, судя по значительному прогрессу в последних версиях браузеров. Давайте следить за будущими версиями и отмечать улучшения в этом вопросе.
+26
9 февраля 2010, 13:36
11

комментарии (63)

–1
Crazybot #
Эм… А по чему считаеься пункт score? Вроде музила 3.5 не грузит картинку, в отличии от хрома, но по очкам поровну имеет…
0
dohlik #
Тут более полная табличка, видимо по ней считалось
0
Crazybot #
Наверное лучше дать ссылку на эту картинку в топике тоже…
0
razetdinov #
Она есть как в тексте, так и на картинке.
0
Crazybot #
Я имею ввиду ссылку на полный вариант. Но да, уже сам нашел тоже. Потому прошу прощения за ошибку
НЛО прилетело и опубликовало эту надпись здесь
+1
razetdinov #
Рад за Оперу :) Думаю, Стив прав: скоро все браузеры подтянутся.
0
dohlik #
Тест показал, что FF 3.6 тоже может. Странно, что в сводной табличке не сошлось.
НЛО прилетело и опубликовало эту надпись здесь
+1
dohlik #
9. || CSS + Inline script = no
8. || CSS = yes
7. || script Iframe = yes
6. || script Image = yes
5. || script Stylesheet = yes
4. || script script = yes
0
mdevils #
А в версии 10.10 они все откатили что ли?
0
mdevils #
Изучил вопрос: оказалось, что в их системе именования 10.5 старше чем 10.10.
0
Crazybot #
Эм… Мне кажется, или в математике 10.5 тоже старше за 10.10?
+4
force #
Правильынй вывод из неверного посыла. Версия оперы 10.50 :)
+2
mdevils #
Здесь математика ни при чём, версии именуются по иным принципам.
0
Crazybot #
А можно где-то почитать о принципах нумерации версий? Всегда думал, что это зависит от личных предпочтений программиста
0
mdevils #
Здесь описаны основной метод «Sequence-based identifiers» и некоторые другие (в основном маркетинговые): en.wikipedia.org/wiki/Software_versioning
НЛО прилетело и опубликовало эту надпись здесь
0
mdevils #
Дело в том, что в стандартных методах именований версий «разряды» разделяются токами/дефисами, причем каждое число в версии может состоять более чем из одной цифры. То есть 10.50 старше, чем 10.10, но 10.5 младше, чем 10.10.
Иначе получается, что 10 старше, чем 9.
0
mdevils #
Тьфу…
* Иначе получается, что 9 старше, чем 10.
0
Svobodniy #
Просто по-хорошему (по-официальному) версия именуется как 10.50…
Версия: 10.50 Internal
Сборка: 3236
0
mdevils #
На сайте написано именно 10.5, что и ввело меня в заблуждение: labs.opera.com/downloads/
0
Klajnor #
Читать это стоит как обычные десятичные дроби. Т.е. десять целых и одна десятая( для красоты написали 10.10) и десять с половиной ( 10.50 или 10.5)
0
TheShock #
непоследовательно. в одном месте для красоты написали 10.10, а в другом — по математическому 10.5, неудивительно, что человека ввело то в заблуждение.
0
homm #
но 10.5 младше, чем 10.10.
в таком случае она должна быть 10.05, чтобы быть младше
0
mdevils #
Пожалуй, вам тоже не помешает ссылка: en.wikipedia.org/wiki/Software_versioning#Sequence-based_identifiers
НЛО прилетело и опубликовало эту надпись здесь
–1
mdevils #
Ты решил сам себе это доказать?)
НЛО прилетело и опубликовало эту надпись здесь
+1
mdevils #
Я встал на защиту своего мозга, который взорвался от этого треда)
0
Crazybot #
Хм… А почему вы до homm на вы, а до arestov на ты?
исто из любопытства. В глаза бросилось :)
–1
Crazybot #
Чисто* Что-то клавиатура сегодня против меня
0
mdevils #
Просто у меня большой опыт споров с ним =)
–1
Crazybot #
Ну если знакомые, то это все обясняет :)
PS. А для меня все же логичнее, что 10.5, старше чем 10.10. Ведь по той же классификации (википедия) там должна бы быть точка (10.0.5 или 10.05). И никакими пожеланиями к нумерации не переубедите: Р
–1
mdevils #
Отправил объяснения в личном сообщении.
0
TheShock #
когда смотришь на номер версии «10.5», то думаешь, что это наверное математическая записьи имеется ввиду «10.50», но тут замечаешь, что версия «10.10»записана не как «10.1» и потому понимаешь, что переж этим ошибся.
+1
calg0n #
хм… а у меня не пашет:
|| CSS + Inline script = no
|| CSS = yes
|| script Iframe = no
|| script Image = no
|| script Stylesheet = no
|| script script = no
_______
Версия: 10.50 Internal
Сборка: 3236

какая у вас сборка?
0
MikeGav #
Сборка 3236 аналогично.
НЛО прилетело и опубликовало эту надпись здесь
0
homm #
Признайся чесно, Delayed script Execution?
НЛО прилетело и опубликовало эту надпись здесь
0
homm #
Я посмотрел, это именно он.
0
calg0n #
подтверждаю
НЛО прилетело и опубликовало эту надпись здесь
0
homm #
Надо троллить Оперу багрепортами по этому поводу. Функционал по почти пригодный, багов, известных мне, только один.
+2
youlose #
Молодцы, наконец-то новый тест появился интересный, а не проверка скорости JS тестом SunSpider.
+1
Crazybot #
Тоже подумал, что хороший тест. потом открыл вкладку Security.
и закрались подозрения. Оказывается что за первое место по безопасности борются Chrome 4 и IE8. Теперь не хочется доверять тесту…
+1
bolk #
Я совсем не понимаю зачем такие сложности. Ну грузили бы в фоне всё, что попадётся, а парсили бы в том порядке, в котором нужно.
0
Zagrebelion #
вполне возможна ситуация, когда в результате работы скриптов останется пустое дерево DOM и грузить вообще ничего не надо.
НЛО прилетело и опубликовало эту надпись здесь
0
burdakovd #
а трафик?
НЛО прилетело и опубликовало эту надпись здесь
0
skorney #
Да, это все супер, но если у меня второй скрипт загрузился в head (который использует jQuery) и начал выполняться, а сама jQuery еще не доступна?… нехорошо.
0
razetdinov #
Скрипты загружаются параллельно, а выполняются по-прежнему последовательно.
–2
Marshalkin #
Извините за оффтопик, но может специалисты по браузерам подскажут, как заставить ФФ3 жрать меньше оперативной памяти? При десятке открытых вкладок и 1 аддоне (файербаг) может жрать и 300 и 400 мб.
При увеличении числа вкладок иногда переваливает за гиг.

Причем по завершении задачи в памяти почему-то освобождается больше места чем было занято ФФ…
–2
calg0n #
мне помогло это:
https://addons.mozilla.org/ru/firefox/addon/11922
–2
calg0n #
мне помогло это:
https://addons.mozilla.org/ru/firefox/addon/11922
0
egorinsk #
Правильное решение: не инклюдить кучу яваскрипт-файлов в начале страницы; не писать яваскрипт-код на стоню килобайт.
0
razetdinov #
Как по вашей схеме подключать сторонние API?
0
lol2Fast4U #
Например, для Django есть замечательное приложение django-assets, которое соединяет несколько Js-файлов в один и минифицирует их. То же самое с CSS.
Теги script ставить надо внизу body. Так сказал Yahoo. Вообще, они много интересного на тему клиентской оптимизации написали.
0
razetdinov #
В комментарии выше говорится о сторонних API, которые нельзя скопировать к себе и склеить со своим кодом. Например, API Яндекс.Карт.
0
razetdinov #
script’ы в конец body перемещают как раз из-за бага, который рассматривается в топике, а не потому что Yahoo сказал.
0
lol2Fast4U #
Yahoo как раз про параллельные загрузки и говорил.
Это нельзя назвать багом — все же работает, просто медленнее загружается в первый раз.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.