Modernizr - Какие скрипты загружаются асинхронно? - PullRequest
Новая
       30

Modernizr - Какие скрипты загружаются асинхронно?

6 голосов
/ 14 декабря 2011

У меня есть следующее: 

Modernizr.load([
{
  load : '//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js',
  complete : function () {
    if ( !window.jQuery ){
      Modernizr.load('/js/jquery-1.6.2.min.js');
    }
  }
},
{
  load : ["/js/someplugin.js", "/js/anotherplugin.js"],
  complete : function()
  {
    // do some stuff
  }
},
{
    load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
}
]};

Я прочитал, что Modernizr загружает сценарии асинхронно.Но в приведенном выше примере, какие из них загружаются асинхронно?

Все ли из следующих загружается асинхронно?

  1. jquery.min.js
  2. someplugin.js
  3. anotherplugin.js
  4. ga.js

Или это сочетание асинхронной и упорядоченной загрузки следующим образом:

  1. jqueryСначала загружается .min.js
  2. Затем загружаются someplugin.js и anotherplugin.js async
  3. наконец, загружается ga.js

У меня естьтрудно проверить, в каком случае это.

1 Ответ

12 голосов
/ 14 декабря 2011

Вы выбрали довольно сложный пример для анализа. Итак, давайте сделаем это поэтапно.

  1. Три набора параметров {...},{...},{...} будут выполняться последовательно.
  2. Внутри первого набора параметров вы загрузите jQuery из CDN Google, а затем, по завершении, проверите, действительно ли загружен jQuery. Если нет (возможно, вы разрабатываете в автономном режиме, а Google CDN недоступен), вы загружаете локальную копию jQuery. Так что они «последовательные», но на самом деле будет загружаться только один из них.
  3. Во втором наборе параметров вы загружаете someplugin.js и 'anotherplugin.js` одновременно и асинхронно. Поэтому они будут загружаться параллельно. Здорово, когда вы можете параллельно распараллеливать 2 элемента за раз, поскольку это «самая слабая ссылка» для браузеров на сегодняшний день (да, только IE. Любой другой браузер будет параллелить 6-8 файлов одновременно).
  4. В третьем наборе параметров вы загружаете скрипт Google Analytics.

Помните, modernizr - это набор инструментов. Включенный загрузчик на самом деле просто переупакованный yepnope . Так что вы можете погуглить за yepnope.

Идея последовательной загрузки состоит в том, чтобы гарантировать, что зависимости загружаются по порядку (например, ваши плагины jQuery должны загружаться после инфраструктуры jQuery). Цель синтаксиса параллельных загрузок в наборе параметров два - повысить производительность для нескольких файлов, которые не являются взаимозависимыми (например, вы можете загружать несколько плагинов jQuery параллельно после загрузки jQuery, если они не зависят друг от друга) .

Итак, чтобы ответить на ваш вопрос, ваша гипотеза № 2 верна. Если вы хотите больше узнать об использовании firebug, добавьте несколько операторов console.log в полную функцию каждого набора параметров. Вы должны видеть, что 3 группы завершаются последовательно каждый раз. Теперь переключите firebug на вкладку «Net», чтобы посмотреть, как исчезают запросы файлов. Файлы someplugin.js и 'anotherplugin.js` не обязательно будут загружаться в одном и том же порядке каждый раз. Запросы будут выполняться по порядку, но там должны перекрываться временные полосы (показывать их параллельно). Тестировать это локально будет сложно, потому что это будет так быстро. Поместите два ваших тестовых файла на медленный сервер или сместите их в противоположность ожидаемому (сделайте первый файл размером 1 МБ, а второй - <1 КБ), чтобы вы могли видеть пересекающиеся загрузки на вкладке сетевого монитора firebug (это просто искусственный сценарий для тестирования, вы можете заполнить файл повторяющимися комментариями JS просто для создания искусственно медленного файла для тестирования). </p>

РЕДАКТИРОВАТЬ: Чтобы уточнить чуть точнее , я хотел бы добавить цитату с yepnopejs.com домашней страницы. yepnopejs - это загрузчик ресурсов, который включен (и псевдоним) в modernizr:

Короче говоря, в каком бы порядке вы их не поместили, это порядок, в котором мы выполнить их в. Выполнены наборы 'load' и 'оба' файлов после ваших «да» или «нет», но порядок, который вы конкретно в этих наборах также сохраняется. Это не значит, что файлы всегда загружать в этом порядке, но мы гарантируем, что они выполняются в этом порядке порядок. Поскольку это асинхронный загрузчик, мы загружаем все в то же время, и мы просто откладываем запуск (или ввод) время как раз подходящее.

Так что да, вы можете поместить jquery, а затем несколько плагинов в один и тот же оператор Modernizr.load, и они будут загружаться параллельно и вставляться в DOM в том же порядке, который указан в аргументах. Единственное, от чего вы отказываетесь - это возможность проверить, успешно ли загружена jQuery, и, возможно, при необходимости получить резервную копию jQuery без CDN. Таким образом, это ваш выбор, насколько важна для вас поддержка. (У меня нет источников, но, похоже, я вспоминаю, что CDN Google отключился только один раз за всю свою жизнь)

...