Как стать автором
Обновить

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

Время на прочтение2 мин
Количество просмотров2.9K
Автор оригинала: Steve Souders
Как справляются браузеры с параллельной загрузкой скриптов?

Во времена 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
Комментарии63

Публикации

Изменить настройки темы

Истории

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн