Frontend оптимизации
В этой статье я расскажу про несколько приемов по оптимизации клиентской части сайта, о которых часто не упоминают в подобных статьях.
1. Работа с IE
Нередко случается, что для IE версии до 9 приходится писать другой код. Для этого обычно используется следующий метод: объявляется глобальная переменная (скажем, isIE) и далее в зависимости от ее значения выполняется различный код.
if (isIE)
{
//Код для IE
}
else
{
//Код для остальных браузеров
}
Для решения этой проблемы порой рациональнее делать так:
//Все функции, объекты etc
<script src="main.js"></script>
<!--[if lt IE 9]>
//Те функции, объекты etc, которые в IE надо изменить
<script src="ie.js"></script>
<![endif]-->
В этом случае другие браузеры не будут грузить тот код, что предназначен для IE, да и редактирование кода, ИМХО, удобнее.
2. Разные виды кавычек
Строка, записанная в двойных кавычках, парсится интерпретатором: из нее удаляются экранирующие последовательности.
На это уходит очень мало времени, так что это экономия на спичках, но все же если нужно использовать просто строку, то незачем указывать ее в двойных кавычках. Так и код удобнее выглядит.
//Интерпретатору: вот тебе строка, распарси ее
element.innerHTML="<a href="/help/" class="help-link" target="_blank">Помощь</a>";
//Интерпретатору: вот тебе готовая строка, ничего делать не нужно
element.innerHTML='<a href="/help/" class="help-link" target="_blank">Помощь</a>';
3. Gzip
Сжатие данных «на лету» — хорошая вещь, но зачем каждый раз сжимать одни и те же данные? В nginx (а он как правило и используется в большинстве случаев) есть модуль gzip_static.
Работает он следующим образом:
Допустим, поступил запрос на файл script.js
Nginx проверяет, есть ли в этой же папке файл script.js.gz и, если есть, добавляет заголовок Content-encoding: gzip и отправляет содержимое .gz-файла.
Включается этот модуль следующим образом: в nginx.conf добавляется строка gzip_static on;
Из минусов можно отметить только то, что при каждом изменении файла нужно пересоздавать .gz-файл.
4. Appcache
Appcache представляет собой кэширование заданных файлов в браузере, доступ к которым будет доступен при отсутствии подключения к сети. К примеру, если на example.com/help.html используется appcache, то при отсутствии подключения у пользователя откроется страница example.com/help.html, а example.com не откроется.
Это будет удобно для тех страниц, просмотр которых не требует подключения к сети. К примеру, это может быть документация, помощь, web-приложения и игры.
Appcache сделан таким образом: подключается файл манифеста, в котором указано, какие файлы хранить в кэше, а какие грузить из сети.
При загрузке страницы браузер вначале скачает файл манифеста, если тот не доступен (нет сети), то браузер выполнит код из FALLBACK-части, если файл доступен и не изменился с прошлой загрузки, то браузер не будет перезапрашивать страницу(!). Если файл изменен, то браузер загрузит заново все файлы из манифеста.
Как тогда быть с обновлениями? Если контент на странице изменился, нужно изменить содержимое файла манифеста. В манифесте поддерживаются комментарии, начинающиеся с символа #, в комментарии можно указывать, например, дату изменения или номер версии.
Как устроен файл манифеста: это простой текстовый файл с расширением .appcache, который имеет следующий вид:
CACHE MANIFEST
index.html
logo.png
style.css
script.js
offline.js
NETWORK:
*
FALLBACK:
server.js offline.js
Включается манифест в html следующим образом: к тегу html добавляется атрибут manifest с адресом файла манифеста.
Пример: Первая строка — начало манифеста. Регистр должен быть верхним. Далее идут имена файлов, которые нужно хранить в кэше, каждый файл с новой строки. Затем, после NETWORK: объявляются те файлы, которые нужно грузить по сети (если этот пункт не писать вообще, то другие файлы, например счетчики посещений, не загрузятся даже при наличии сети). В FALLBACK модуле описывается, какой файл грузить в случае невозможности загрузки первого. В описанном примере при невозможности загрузки файла server.js будет взят из кэша файл offline.js, который сообщит пользователю, что для полного функционала требуется подключение к сети.
Примеры сайтов, использующих Appcache: jsconsole.com, reshix.ru.
Автор: golubchikov
