За последние несколько лет использование JavaScript резко возросло, равно как и количество сценариев, загружаемых на среднюю веб-страницу. С этими тегами скрипта приходит много багажа, таких как блокировка и отсутствие управления зависимостями.
Сегодня я хотел бы обратить ваше внимание на несколько загрузчиков JavaScript, которые представляют собой мини-наборы инструментов, которые значительно упрощают добавление и загрузку сценариев.
Проблема с простыми тегами сценариев
Они блокируют страницу
Страница перестает «появляться» во время загрузки скрипта.
Файлы JavaScript, загруженные с использованием тега script , по своей природе блокируются. Все, что происходит или загружается на страницу, останавливается во время загрузки и выполнения скрипта. И помните, что это относится к каждому тегу скрипта. Некоторые современные браузеры могут позволить вам загружать их параллельно, но остальная часть страницы по-прежнему блокируется для выполнения каких-либо значимых действий.
Нет простого способа управления зависимостями
Отсутствие управления зависимостями является большим недостатком.
Далее идет проблема обработки зависимостей. Для вашей обычной веб-страницы она вам, вероятно, не нужна. Проверьте, загружена ли ваша библиотека, и продолжайте. Однако для нетривиального веб-приложения это не очень хорошее решение. Вам нужно будет загружать скрипты условно на основе зависимостей. Даже тогда вам все равно придется выяснить, в каком порядке они загружены. Вероятно, вы можете сделать это вручную для 3-4 файлов, но когда все начнёт накапливаться, вам, вероятно, лучше использовать автоматизированное решение.
Доступные варианты
Первоначальная идея для этого обзора была вызвана публикацией в Hacker News о создании списка загрузчиков сценариев JavaScript, примерно месяц назад. Я наблюдал за тем, как список увеличился с 3 до 10, прежде чем потерял интерес и пошел дальше.
Теперь, когда прошло достаточно времени, я думаю, что этот список будет довольно массивным. К сожалению, мое Google-фу довольно слабое, и я не могу его найти. Если пользователю с орлиным взглядом удастся найти эту тему, оставьте сообщение в комментариях ниже, чтобы я мог сослаться на него и, надеюсь, расширить свой список здесь.
Этот список составлен из рекомендаций веб-разработчиков высокого уровня, которые используют эти инструменты в своих приложениях.
И что касается моего выбора здесь, этот список представляет собой набор рекомендаций, которые появились после того, как я попросил некоторые из переднего конца сообщества принять решения, которые они используют. Некоторые из приведенных ниже решений могут также обрабатывать управления зависимостями, хотя большинство придерживаются простой асинхронной загрузки. Независимо от дополнительных тонкостей, каждый из приведенных ниже сценариев делает одно с aplomb — загружает скрипты Java с минимальными усилиями.
Так что без лишних слов и в произвольном порядке:
HeadJS
Head JS загружает скрипты параллельно, независимо от того, сколько их и какой браузер. Загрузите сценарии как изображения. Используйте HTML5 и CSS3 безопасно. Целевой CSS для разных экранов, путей, состояний и браузеров. Сделайте это единственным скриптом в вашей голове.
Автор: Теро Пийрайнен
URL проекта: здесь
Размер: 6,3 КБ
Ссылки по теме:
LabJS
LABjs (загрузка и блокировка JavaScript) — это универсальный загрузчик JavaScript по требованию, способный загружать любой ресурс JavaScript из любого места на любую страницу в любое время. Вы можете легко указать, какие сценарии имеют зависимости порядка выполнения, и LABjs обеспечит правильный порядок выполнения. Это делает LABjs безопасным для использования практически с любым ресурсом JavaScript, независимо от того, управляете вы им или размещаете его, и является ли он автономным или частью большого дерева зависимостей ресурсов.
Автор: Кайл Симпсон
URL проекта: здесь
Размер: 4,7 КБ
Ссылки по теме:
RequireJS
RequireJS — загрузчик файлов и модулей JavaScript. Он оптимизирован для использования в браузере, но может использоваться в других средах JavaScript, таких как Rhino и Node. Использование модульного загрузчика скриптов, такого как RequireJS, улучшит скорость и качество вашего кода.
Автор: Джеймс Берк
URL проекта: здесь
Размер: 13 КБ
Ссылки по теме:
ControlJS
ControlJS — это модуль JavaScript, который обрабатывает как встроенные, так и внешние сценарии, задерживает выполнение сценария до тех пор, пока страница не будет отрисована, позволяет загружать, не выполнять сценарии и интегрируется с простыми изменениями в HTML и без изменений кода
Автор: Стив Соудерс
URL проекта: здесь
Размер: 3,6 КБ
Ссылки по теме:
StealJS
Проект StealJS представляет собой набор командных и клиентских утилит JavaScript, которые облегчают создание, упаковку, совместное использование и использование приложений JavaScript. Включает модули для управления зависимостями, сжатия JS, очистки и ведения журнала.
Автор: Брайан Мошел
URL проекта: здесь
Размер: 11,4 КБ
Ссылки по теме:
yepnope
yepnope — это суперскоростной асинхронный загрузчик условных ресурсов, который позволяет загружать только те сценарии, которые нужны вашим пользователям. Он работает как с JavaScript, так и с CSS и имеет полный набор тестов в QUnit, который вы можете запустить в своем наборе поддерживаемых браузеров, чтобы убедиться, что он работает.
Автор: Алекс Секстон и Ральф Хольцманн
URL проекта: здесь
Размер: 3,4 КБ
Ссылки по теме:
PINF JS Loader
Загрузчик позволяет загружать согласованную и современную среду CommonJS для любой поддерживаемой платформы (на сервере и в браузере) и, таким образом, идеально подходит для использования в качестве цели для команды commonjs и разработки кроссплатформенных Приложения и библиотеки JavaScript.
Автор: Кристоф Дорн
URL проекта: здесь
Размер: 22 КБ
Ссылки по теме:
JSLoad
JSLoad — это загрузчик файлов Javascript, который мы написали для Instructables. Вы даете ему набор зависимостей и группировок, и он загружает нужные вам файлы, когда они нужны вашему исполняющемуся коду. Настоящая полезность JSLoad заключается в его способности группировать зависимости с помощью тегов.
Автор: Эрик Нгуен
URL проекта: здесь
Размер: 9,8 КБ
Ссылки по теме:
JsDefer
JsDefer поддерживает параллельную / последовательную загрузку, основанную на определениях, зависимостях и переносе, а не на развертывании, а также на том, определены ли зависимости в отдельном файле def или в самом скрипте, а интеграция с Deferred (как в jQuery 1.5) позволяет или упрощает многие сценарии использования среди многих другие.
Автор: Борис Мур
URL проекта: здесь
Размер: 4,7 КБ
Ссылки по теме:
JSL (JavaScript Loader)
JSL обеспечивает загрузку по требованию, кеширование в браузере, динамическую асинхронную загрузку JavaScript, отложенную загрузку и предотвращение дублирования источников среди множества других функций.
Автор: Андрес Видаль
URL проекта: здесь
Размер: 2,1 КБ
Ссылки по теме:
YUI 3 Получить
Get Utility предоставляет механизм для присоединения ресурсов сценариев и CSS, включая междоменные ресурсы, к DOM после загрузки страницы.
Автор: Адам Мур
URL проекта: здесь
Размер: 17,9 КБ
Ссылки по теме:
DominateJS
DominateJS позволяет асинхронно загружать весь ваш JavaScript и откладывать последовательное выполнение до загрузки страницы. DominateJS стремится быть кросс-браузерной и на 100% безопасной для документов.сайт-библиотек! Это сильно измененная (и мощная!) Эволюция ControlJS.
Автор: Крис Джоэл и Джейсон Бентеру
URL проекта: здесь
Размер: 48 КБ
Load.js
load.js — это ленивый загрузчик micro JS. Построенный на основе chain.js, он позволяет вам лениво загружать JS-скрипты последовательно или параллельно и обрабатывать сложные цепочки зависимостей.
Автор: Крис О’Хара
URL проекта: здесь
Размер: 2 КБ
Ссылки по теме:
BravoJS
BravoJS — это реализация предложенного проекта для CommonJS Modules / 2.0
Автор: Уэс Гарланд
URL проекта: здесь
Размер: 10,7 КБ
начальная загрузка
Bootstrap — это небольшая библиотека для динамической загрузки файлов JavaScript.
Это основной случай использования в вашем JS-коде для загрузки JS-файлов только тогда, когда они используются.
Автор: Скотт Кун
URL проекта: здесь
Размер: 1,3 КБ
LazyLoad
LazyLoad — это маленькая (всего 904 байта минимизированная и сжатая) утилита JavaScript, не зависящая от зависимостей, которая упрощает загрузку внешних файлов JavaScript и CSS по запросу.
Когда это возможно, LazyLoad автоматически загружает ресурсы параллельно, обеспечивая порядок выполнения, когда вы указываете массив URL для загрузки. В браузерах, которые не сохраняют порядок выполнения асинхронно загружаемых сценариев, LazyLoad будет безопасно загружать сценарии последовательно.
Автор: Райан Гроув
URL проекта: здесь
Размер: 1,6 КБ
curl.js
curl.js — это небольшой, но очень быстрый AMD-совместимый асинхронный загрузчик. Текущий размер: 4,5 КБ (2,1 КБ в сжатом виде) с использованием Google Closure Compiler.
Если вы хотите использовать curl.js для не-AMD модулей (обычных файлов javascript), вы должны использовать версию с js! встроенный плагин. Вы также можете встроить модуль domReady. Объединенный загрузчик curl + js + domReady по-прежнему всего 6,1 КБ (2,7 КБ в сжатом виде).
Автор: Джон Ханн
URL проекта: здесь
Размер: 5 КБ
$ script.js
$ script.js — это асинхронный загрузчик JavaScript и менеджер зависимостей с удивительно легким пространством. Как и многие другие загрузчики скриптов, $ script.js позволяет вам загружать ресурсы скрипта по запросу с любого URL и не блокировать загрузку других ресурсов, таких как CSS и изображения.
Автор: Дастин Диаз
URL проекта: здесь
Размер: 1,4 КБ
NBL.js
NBL.js — это крошечный скрипт, который ускоряет загрузку ваших HTML-страниц, асинхронно (параллельно) загружая все ваши файлы JavaScript с остальной частью вашей страницы. Обычно, если вы включаете два или три сценария на свою страницу, браузер будет ждать их выполнения, прежде чем отобразится ваша страница.
Автор: Беркли
URL проекта: здесь
Размер: 971 Б
Ссылки по теме:
Это упаковка!
Хотя каждый из перечисленных выше инструментов обрабатывает загрузку сценария немного уникальными способами, обязательно выполняйте свои тесты, решая, какой из них вам подходит.
Как я упоминал ранее, если вы думаете, что загрузчик должен быть здесь, но его нет, напишите нам строку ниже, и мы соответствующим образом обновим сводку.