Асинхронная загрузка скриптов. Стыкуем асинхронные скрипты. Оптимизация структуры веб-страниц
Асинхронная загрузка скриптов
Шаблон двойного скрипта от John Resig
«Ленивая» загрузка
Заключение
Скрипт sorttable-async.js в данном случае не является необходимым для первоначального отображения страницы. Такая ситуация (внешние скрипты, которые не используются для первоначального отображения страницы) является кандидатом номер 1 для внедрения асинхронной загрузки. Вариант с асинхронной загрузкой скриптов подключает этот скрипт, используя DOM-методы для создания нового тега script:
var script = document.createElement("script");
script.src = "sorttable-async.js";
script.text = "sorttable.init()"; // это объясняется чуть ниже
document.getElementsByTagName("head")[0].appendChild(script);
Диаграмма HTTP-загрузки для асинхронной загрузки скриптов изображена на рис. 2. Стоит обратить внимание, как асинхронный подход предотвращает блокирующее поведение: sorttable-async.js и arrow-right-20x9.gif загружаются параллельно. Это снижает общее время загрузки дл 429 мс.
Рис. 5.10. Диаграмма загрузки скриптов в асинхронном случае, источник stevesouders.com