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

Обзор методов клиентской оптимизации47Оптимизация стадии пост-загрузкиК началу этой стадии у пользователя уже должна быть в распоряженииоформленная HTML-страница, на которой все ссылки и формы должныработать без JavaScript.На этой стадии могут загружаться любые объекты, которые необходимыдля этой или каких-либо других страниц.При помощи специального обработчика JavaScript, который начинаетработать на этой стадии, возможно к уже существующей функциональностистраницы добавить расширенные возможности в виде подсказок,дополнительных данных с сервера, какой-либо анимации и т. д.Этот обработчик может производить следующие операции:❚ находить необходимые элементы дерева объектов страницы, требующиединамического вмешательства, подключая все необходимыеобработчики, события и т.д.;❚ проверять наличие необходимых JavaScript библиотек и по меренадобности загружать их, проверяя, чтобы один и тот же код не загружалсядважды;❚ загружать в фоне внешние объекты, используемые на других страницах.В случае применения технологии data:URI для уменьшения количествавызываемых объектов на этой стадии необходимо загружать файл CSS, содержащийвсе используемые на странице изображения в формате base-64.Об отложенной загрузке ресурсов, не требующихся на момент первогоотображения страницы, можно прочитать в пятой главе, а также в седьмойглаве книги «Разгони свой сайт».Прогрессивный подходВо многих современных браузерах, в частности, в последних версияхбраузера Safari, активно внедряется прогрессивная логика отображениястраницы.С одной стороны, браузер не ждет последовательной и полной загрузкивсех блокирующих вывод страницы внешних объектов, а с другой — неотображает неформатированную веб-страницу. Сочетая преимущества сразунескольких подходов, браузер определяет, в какой момент какую частьстраницы можно отобразить, чтобы опыт пользователя был наилучшим.Загрузка всех внешних объектов производится параллельно, и разборсодержимого не останавливается. При этом, если производится обращениек свойству стиля или макета, модуль JavaScript приостанавливаетсвою работу и ожидает загрузку всех незагруженных файлов CSS. Кактолько все стили загружены, выполнение сценария продолжается с тогоместа, где оно было приостановлено.