Оптимизация структуры веб-страниц. Особенности загрузки браузерами внешних объектов. Обзор методов клиентской оптимизации
Стадии загрузки страницы
Распределенное хранение контента (CDN)
Особенности загрузки кода CSS
В большинстве браузеров, отображение страницы будет приостановлено до тех пор, пока все внешние CSS-файлы не будут загружены. Кроме того, теги <style>, встречающиеся на странице будут порождать частичную или полную перерисовку страницы, иногда изменяя уже отобразившийся макет, с которым пользователь мог начать взаимодействовать.
Таким образом, более высокой скорости отображения страницы можно добиться, располагая в самом начале веб-страницы, в разделе <head> все элементы <link>, содержащие вызовы файлов CSS-стилей, а также все встроенные стили, содержащиеся в тегах <style>.
Особенности загрузки кода JavaScript
Из-за того, что код JavaScript может изменять содержимое и макет веб-страницы, браузеры приостанавливают отображение элементов, следующих за JS-кодом до тех пор, пока код не будет загружен и исполнен. Большинство браузеров при этом приостанавливают даже загрузку внешних объектов, следующих за таким JS-кодом. Однако если на момент начала загрузки JS-файла загрузка внешних объектов уже была начата, они будут загружены параллельно.
Подробный разбор возможной ситуации
В приведенном ниже примере на веб-странице загружаются два внешних файла CSS и JS.
<head>
<script type="text/javascript" src="script-1.js"></script>
<link rel="stylesheet" type="text/css" href="style-1.css" />
<script type="text/javascript" src="script-2.js"></script>
<link rel="stylesheet" type="text/css" href="style-2.css" />
</head>
При таком порядке следования в документе и при пустом кэше, большинство браузеров будет вынуждено дождаться загрузки первого файла JavaScript, только потом начать загрузку следующих двух файлов CSS и JS и лишь по завершению загрузки второго файла JS загрузить последний файл стилей.
Всего лишь изменив порядок следования вызовов внешних объектов так, чтобы впереди были вызовы файлов CSS можно получить ощутимый выигрыш в скорости загрузки.
<head>
<link rel="stylesheet" type="text/css" href="style-1.css" />
<link rel="stylesheet" type="text/css" href="style-2.css" />
<script type="text/javascript" src="script-1.js"></script>
<script type="text/javascript" src="script-2.js"></script>
</head>
В этой ситуации, браузер может инициировать параллельную загрузку сразу трех внешних объектов — двух файлов стилей и первого файла JS. По окончанию их загрузки браузеру остается загрузить лишь один файл JavaScript, итоговое время загрузки будет ощутимо ниже.
Как видно на приведенной ниже диаграмме, в первой ситуации загрузка каждого файла JavaScript блокирует получение остальных внешних объектов, создавая дополнительные задержки. Во второй же ситуации вместе с загрузкой первого файла JS происходит параллельная загрузка максимально возможного количества внешних объектов.
Рисунок 1.12. Диаграмма загрузки внешних объектов при различном порядке их вызовов
Разумеется, экономия времени в каждом отдельном случае будет зависеть от размеров загружаемых объектов, и их количества, однако пренебрегать этой особенностью не стоит.
Следует помнить, что данная особенность не актуальна в браузерах, поддерживающих параллельную неблокирующую загрузку внешних объектов. Перечень таких браузеров можно получить при помощи инструментов, описанных чуть ранее в этой главе.