Реактивные веб-сайты Николай Мациевский Евгений ...

172РЕАКТИВНЫЕ ВЕБ-САЙТЫго представления о внутреннем коде HTML-страницы, то вполне возможна ситуация(и она будет возникать в большинстве случаев), когда некоторые переменныебудут не определены на момент их использования. Поэтому необходимоубедиться, что внешние скрипты, загруженные асинхронным образом, ивнутренние скрипты страницы состыкованы: внутренние скрипты не выполняютсядо тех пор, пока асинхронные скрипты полностью не загрузятся.Существует несколько стандартных путей для стыковки асинхроннозагружаемых скриптов с другим JavaScript-кодом.❚ window onload. Выполнение внутреннего JavaScript-кода можетбыть привязано к событию window onload. Это очень просто в использовании,но часть скриптов может быть выполнена раньше.❚ onreadystatechange у скрипта. Внутренний код может быть привязанк событию onreadystatechange и(или) onload (необходимо будетиспользовать оба варианта, чтобы покрыть все популярные браузеры).В этом случае кода будет больше, он будет более сложным, нобудет гарантия, что он исполнится сразу после загрузки соответствующихвнешних файлов.❚ Встроенные вызовы. Внешние скрипты могут быть модифицированытаким образом, чтобы включать в самом конце вызов небольшогоучастка кода, который вызовет соответствующую функцию из внутреннегокода. Это все замечательно, если внешние и внутренниескрипты разрабатываются одной и той же командой. Но в случае использованиясторонних разработок это не обеспечит всей необходимойгибкости для связки внешних скриптов с внутренним кодом.В этом разделе параллельно освещаются два вопроса: как асинхронныескрипты ускоряют загрузку страницы и как можно состыковать асинхронныескрипты и внутренние, используя модифицированный вариант загрузчика отДжона Ресига (автора jQuery) — шаблон двойного тега .5.4.1. é·˚˜Ì˚ ‚˚ÁÓ‚˚ ÒÍappleËÔÚÓ‚Если добавить скрипт на страницу обычным способом (через ), диаграмма загрузки будет примерно следующей.Хотя скрипт и функционирует, но это не сделает нас намного счастливее,ибо загрузка страницы замедлится. На рис. 5.9 хорошо видно, какскрипт (по имени sorttable-async.js) блокирует все остальные HTTP-запросына странице (в частности, arrow-right-20x9.gif), что замедляет загрузкустраницы. Все диаграммы загрузки сняты при помощи Firebug 1.3beta. В этой версии Firebug красной линией отображается событие onload (асиняя линия соответствует событию domcontentloaded). Для версии с обычнымвызовом скрипта событие onload срабатывает на 487-й миллисекунде.