Frontend оптимизации

в 11:54, , рубрики: html, html5, nginx, статика, метки: , ,

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

Источник

Поделиться

* - обязательные к заполнению поля