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

Автор оригинала: 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 блокирует все типы ресурсов. Уверен, параллельная загрузка скриптов будет совершенствоваться, судя по значительному прогрессу в последних версиях браузеров. Давайте следить за будущими версиями и отмечать улучшения в этом вопросе.
Поделиться публикацией

Комментарии 63

    –1
    Эм… А по чему считаеься пункт score? Вроде музила 3.5 не грузит картинку, в отличии от хрома, но по очкам поровну имеет…
      0
      Тут более полная табличка, видимо по ней считалось
        0
        Наверное лучше дать ссылку на эту картинку в топике тоже…
          0
          Она есть как в тексте, так и на картинке.
            0
            Я имею ввиду ссылку на полный вариант. Но да, уже сам нашел тоже. Потому прошу прощения за ошибку
      +7
      opera 10.5 ;)
      || script script = yes;
      || script Stylesheet = yes;
      || script Image = yes;
      || script Iframe = yes — эта штука только у оперы

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

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

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

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

                                          Самое читаемое