- window onload. Выполнение внутреннего JavaScript-кода может быть привязано к событию window onload. Это очень просто в использовании, но часть скриптов может быть выполнена раньше.
- onreadystatechange у скрипта. Внутренний код может быть привязан к событию onreadystatechange и(ли) onload. (Необходимо будет использовать оба варианта, чтобы покрыть все популярные браузеры.) В этом случае кода будет больше, он будет более сложным, но будет гарантия, что он исполнится сразу после загрузки соответствующих внешних файлов.
- Встроенные вызовы. Внешние скрипты могут быть модифицированы таким образом, чтобы включать в самом конце вызов небольшого участка кода, который вызовет соответствующую функцию из внутреннего кода. Это все замечательно, если внешние и внутренние скрипты разрабатываются одной и той же командой. Но в случае использования сторонних разработок, это не обеспечит всей необходимой гибкости для связки внешних скриптов с внутренним кодом.
Стыкуем асинхронные скрипты. Оптимизация структуры веб-страниц
Асинхронная загрузка скриптов
Шаблон двойного скрипта от John Resig
«Ленивая» загрузка
Заключение
Этот раздел написан под впечатлением от статьи Steve Souders (автора знаменитых советов Yahoo! касательно клиентской производительности) "Coupling Async Scripts" (http://www.stevesouders.com/blog/2008/12/27/coupling-async-scripts/ ). Steve проанализировал поведение JavaScript-файлов при загрузке и предложил несколько путей для обхода их «блокирующих» свойств.
Если скрипты загружаются в обычном порядке (<script src="...">), то они блокируют загрузку всех остальных компонентов страницы (в последних версиях Firefox и в Safari это не так, но речь идет, в основном, про 70% пользователей с IE) и блокируют отрисовку всей той части страницы, которая расположена ниже вызова скриптов по HTML-коду. Асинхронная загрузка скриптов (например, при помощи динамического создания объектов после срабатывания комбинированного события window.onload) предотвращает такое поведение браузера, что ускоряет загрузку страницы.
Единственная проблема с асинхронной загрузкой скриптов заключается в их взаимодействии с внутренними скриптами страницы (а также с другими внешними скриптами), которые используют переменные, определенные во внешнем скрипте. Если внешний скрипт загружается асинхронно безо всякого представления о внутреннем коде HTML-страницы, то вполне возможна ситуация (и она будет возникать в большинстве случаев), когда некоторые переменные будут не определены на момент их использования. Поэтому необходимо убедиться, что внешние скрипты, загруженные асинхронным
образом, и внутренние скрипты страницы состыкованы: внутренние скрипты не выполняются до тех пор, пока асинхронные скрипты полностью не загрузятся.
Существует несколько стандартных путей для стыковки асинхронно загружаемых скриптов с другим JavaScript-кодом:
В этом разделе параллельно освещаются два вопроса: как асинхронные скрипты ускоряют загрузку страницы и как можно состыковать асинхронные скрипты и внутренние, используя модифицированный вариант загрузчика от John Resig (автора jQuery) - шаблон двойного тега script.