войти зарегистрироваться

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

индекс
107,44

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

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

Во времена 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
Steve Souders
razetdinov

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

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

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

      какая у вас сборка?
      • Сборка 3236 аналогично.
      • my.opera.com/desktopteam/blog/2010/02/08/acid3-and-more
        • Признайся чесно, Delayed script Execution?
          • может быть. надо будет посмотреть, сейчас не могу)
            • Я посмотрел, это именно он.
              • подтверждаю
                • ай, стыдно мне
                  • Надо троллить Оперу багрепортами по этому поводу. Функционал по почти пригодный, багов, известных мне, только один.
  • Молодцы, наконец-то новый тест появился интересный, а не проверка скорости JS тестом SunSpider.
    • Тоже подумал, что хороший тест. потом открыл вкладку Security.
      и закрались подозрения. Оказывается что за первое место по безопасности борются Chrome 4 и IE8. Теперь не хочется доверять тесту…
  • Я совсем не понимаю зачем такие сложности. Ну грузили бы в фоне всё, что попадётся, а парсили бы в том порядке, в котором нужно.
    • вполне возможна ситуация, когда в результате работы скриптов останется пустое дерево DOM и грузить вообще ничего не надо.
      • Ну не грузили бы, если оказалось не надо, если ещё не загрузили.
        • а трафик?
          • Во-первых, такая ситуация исключительна редка. Горазде чаще загрузка скриптов блокируется при помощи UserJS и блокировщиков рекламы. Во-вторых, если канал медленный, то и так не загрузится. В-третьих, можно сделать опцию, по этому пути, похоже, Опера и идёт. В-четвёртых, опять же только Опера не грузит картинки при display:none, другие браузеры так о трафике не пекутся.
  • Да, это все супер, но если у меня второй скрипт загрузился в head (который использует jQuery) и начал выполняться, а сама jQuery еще не доступна?… нехорошо.
    • Скрипты загружаются параллельно, а выполняются по-прежнему последовательно.
  • Извините за оффтопик, но может специалисты по браузерам подскажут, как заставить ФФ3 жрать меньше оперативной памяти? При десятке открытых вкладок и 1 аддоне (файербаг) может жрать и 300 и 400 мб.
    При увеличении числа вкладок иногда переваливает за гиг.

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