labjs

Умная загрузка скриптов с помощью LABjs

Вы, наверное, знаете, что асинхронная загрузка ресурсов является ключом к предотвращению нежелательных и ненужных блокировок в браузере.

Есть много доступных скриптов/библиотек, помогающих с асинхронной загрузкой, но только единицы из них и простые и компактные и надежные.

В этой статье речь пойдет о LABjs — легкой утилите Кайла Симпсона для загрузки ваших скриптов без блокировок.

Скачать LABjs

Вы можете скачать LABjs с официального сайта LABjs или через GitHub.

Традиционные включения скриптов

Традиционное включение скриптов блокирует загрузку последующих ресурсов. Как выглядит стандартное включение, представлено ниже:

Ждать...ждать...ждать. Это пустая трата времени. Если другие части страницы не используют эти скрипты, почему же пользователям приходится ждать, прежде чем все загрузится? LABjs исправляет это.

Использование LABjs

Сначала подключаем LABjs через традиционный тэг SCRIPT:

$LAB переменная указателя LABjs. Вы можете загружать скрипты, используя метод скрипта:

Метод wait позволяет приостанавливать исполнение скрипта (не загрузку) перед тем, как выполнятся последующие скрипты в цепочке:

Использование wait является хорошим путем управления зависимостями скриптов.

На пример, вы не можете использовать MooTools More перед MooTools Core, потому что MooTools Core — ядро библиотеки. Хотя вы и указали, чтобы Core грузилось раньше More, но это еще не значит, что так и будет, и чтобы не было таких ошибок, вы можете использовать wait:

Также метод wait возвращает ответ, когда скрипты полностью прогрузятся:

Чтобы закончить пример, мы напишем следующий код:

Вот и вся загрузка скриптов через LABjs!

Настройки LABjs

Вы также можете настраивать LABjs через метод setOptions:

Вот несколько опций:

  • AlwaysPreserveOrder: Выполняет вызов wait () после каждого скрипта
  • UsePreloading: Позволяет LABjs использовать другие загрузочные трюки (дополнительная информация)
  • BasePath: Устанавливает основной путь для всех скриптов

Также, доступно много других опции. Информация о них доступна в онлайн-документации.

Выводы

LABjs маленькая утилита, ценность которой трудно не дооценить. Она компактна, проста в использовании и реализации(!).


Оставить комментарий