Рекомендуемое использование для асинхронных загрузчиков JavaScript

Просто начал смотреть на асинхронные библиотеки загрузки javascript, такие как lab.js и script.js. Мой вопрос о лучших методах использования этого типа асинхронной загрузки.

Я подумал о паре возможных настроек:

Загрузите асинхронный загрузчик вверху или на страницу с тегом скрипта. Это позволяет выполнять сжатие и кэширование, но также блокирует во время этой начальной загрузки. Скорее всего, это не так уж и много, так как предполагается, что эти загрузчики довольно малы (стоит ли сначала загружать css)?
Сделайте так, чтобы код асинхронного загрузчика был встроен в ваш HTML, а затем немедленно начните использовать для загрузки зависимостей. Это означает, что нет отдельного запроса для асинхронного загрузчика, поэтому он, вероятно, немного быстрее, но он также не получает gzip и кешируется, поэтому он должен загружаться каждый раз.
Выполните классическую загрузку JS внизу страницы, чтобы сначала загружались таблицы стилей и т. Д. Поместите асинхронный загрузчик в тег блокировки скрипта внизу страницы, затем асинхронно загрузите все зависимости.

Какой сценарий наиболее часто используется, как люди обычно загружают свои js асинхронно??

0

javascript dependency-management asynchronous-loader

Источник

user74389 31 мар '11 в 15:37

1 ответ

Другие вопросы по тегам javascript dependency-management asynchronous-loader

user419970 31 мар '11 в 15:43 2011-03-31 15:43 · Answer 1 · 2011-03-31 15:43

<head>
   <!-- data-main attribute tells require.js to load
        scripts/main.js after require.js loads. -->
   <script data-main="scripts/main" src="scripts/require.js"></script>
</head>

Я рекомендую (1) загрузить его в голову.

Не стоит включать его в ваш html (2), потому что он останавливает кеширование. Не говоря уже о том, что вы должны включать это везде, и это просто безобразно.

Действительная альтернатива (3) (но лично она того не стоит) - создать <script> тег с использованием JavaScript и внедрение его в вашу голову. Если это сделано в нижней части вашего тела, он должен позволить вашей html / css полностью загрузиться, прежде чем ваш асинхронный загрузчик запустится.

В качестве приятного бонуса require.js позволяет вам дать указатель на ваш основной скрипт и он загрузит тот, который когда-то требовал, загрузился. Затем вы можете выполнить большую часть загрузки вашего асинхронного файла в основном скрипте и установить четко определенный набор требований для каждого файла с точки зрения того, что им требуется на странице.

Причины асинхронной загрузки вашего JavaScript включают

быстрая загрузка исходного HTML/CSS.
Ваши заголовки остаются "чистыми"
Ваш javascript и html четко разделены.
Вы можете динамически загружать файлы на основе обнаружения функций.
Вы можете четко определить ваши межфайловые зависимости.
Вы можете загружать библиотеки модульно (например, YUI) вместо загрузки всей библиотеки (например, jQuery).

И список продолжается. Очень просто и аккуратно включить строку, подобную приведенной выше, в свой общий вид / страницу общего доступа или главную страницу.

Расширить динамическую загрузку файлов JavaScript на основе обнаружения функций. Я имею в виду, что вы можете просматривать DOM, для которого должны быть загружены файлы JavaScript. Например, если у вас есть <ul class="image-slider"> на вашей странице, то вы можете обнаружить это с помощью стандартных селекторов CSS и загрузить image-slider.js файл, чтобы незаметно улучшить это с помощью JavaScript.

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