«Ленивая» загрузка. Стыкуем асинхронные скрипты. Оптимизация структуры веб-страниц
Асинхронная загрузка скриптов
Шаблон двойного скрипта от John Resig
«Ленивая» загрузка
Заключение
Общее время загрузки может быть уменьшено еще больше, если использовать «ленивую загрузку» скрипта (загружать его динамически как часть обработчика события onload). Мы можем просто оборачивать заявленный выше код в обработчик события onload:
window.onload = function() {
var script = document.createElement("script");
script.src = "sorttable-async.js";
script.text = "sorttable.init()";
document.getElementsByTagName("head")[0].appendChild(script);
}
В этом случае нам жизненно необходимо техника стыковки скриптов. Преимущество данного подхода заключается в том, что событие onload срабатывает раньше, что и подтверждается на рис. 5.11. Событие onload, отмеченное красной линией, срабатывает примерно на 320 миллисекунде. Стоит отметить, что в таком случае мы увеличиваем общее время загрузки страницы (за счет некоторой синхронизации загрузки скриптов с общим процессом загрузки страницы, но ускоряем появление первоначальной картинки в браузере пользователя).
Рис. 5.11. Диаграмма загрузки в случае «ленивой» загрузки скриптов, источник stevesouders.com.