Пересмотр HTML5 Local Storage

Представляю вам вольный перевод статьи «HTML5 Local Storage Revisited», автором которой является Luis Vieira.

Local Storage является частью HTML5 API веб-хранилища и позволяет хранить данные прямо в браузере. В отличие от куков (cookie), данные, хранящиеся в локальном хранилище, не отправляются обратно на сервер. Все данные остаются на стороне клиента, и в настоящее время вы можете хранить от 2МБ до 10МБ данных. Это ограничение индивидуально для каждого браузера, протокола (http или https), порта и используемого домена верхнего уровня.

В этой статье мы обсудим, как использовать этот API для улучшения производительности веб-сайта. Я предполагаю, что вы знаете что такое веб хранилище, если вам нужно освежить свои знания, то советую прочитать статью An Overview of the Web Storage API, написанную Colin Ihrig.

Примечание от переводчика:

Для тех, кто не знаком с английским языком или больше предпочитает великий и могучий, могу предложить к прочтению свою статью HTML5 API веб-хранилища.

Доступное дисковое пространство

Прежде чем мы начнем обсуждение локального хранилища, я хочу дать вам обзор доступного дискового пространства в современных мобильных и настольных браузерах. Приведённые ниже таблицы основаны на статье Работа с квотой в мобильных браузерах.

Собственный кэш vs локальное хранилище

При использовании локального хранилища, ваши данные остаются на стороне клиента и будут сохраняться между сеансами и перезагрузками устройства. Как я уже упоминал во введении, ограничения API локального хранилища связаны с конкретными браузерами (как показано в предыдущих таблицах), протоколом, портом и используемым доменом верхнего уровня. Напротив, свободное место кэша браузера является общим для всех веб-сайтов, и он намного меньше на мобильных устройствах. Зачастую он может очищаться даже во время одного и того же визита. Мобильные устройства вызывают дополнительные вопросы: они менее мощные, чем настольные устройства, поэтому достижение максимальной производительности стоит превыше всего.

Было много дискуссий по поводу производительности локального хранилища. Например, Christian Heilmann, писал «Не существует простого решения для локального хранилища». Локальное хранилище может иметь проблемы с производительностью, если использовать его неосторожно. Первое, что необходимо учитывать - что это синхронный API, блокирующий основной поток пользовательского интерфейса. Локальное хранилище работает с жестким диском, поэтому операции записи и считывания могут быть дорогостоящими в сравнении с чтением из памяти. Для того, чтобы дать доступ к локальному хранилищу браузеру необходимо прочитать данные с диска, а это приводит к снижению производительности. Это не является сильным ударом по производительности при работе с небольшими объемами данных, но может быть заметно при использовании переполненного хранилища.

На практике вы должны использовать как можно меньше обращений к хранилищу. Кроме того, поскольку мы имеем дело с синхронным API, необходимо пытаться считывать данные из локального хранилища только после события window.onload, чтобы избежать блокирования потока пользовательского интерфейса.

Ситуация меняется

Но ситуация улучшается. Согласно статье, опубликованной Питером МакЛахланом, локальное хранилище может быть в 5 раз быстрее нативного кэша в мобильных браузерах.

В приложении к этой статье вы можете увидеть эволюцию производительности локального хранилища в мобильных браузерах, и как сильно она возросла. Вы можете также видеть, что локальное хранилище всегда было быстрее нативного кэша.

Кто использует локальное хранилище?

Есть несколько случаев, когда веб-сайты начали хранить ресурсы в локальном хранилище, например, The Guardian, которые используют локальное хранилище для критически важного CSS (critical path). Вы можете посмотреть эту презентацию 2014 года, чтобы понять, как они смогли это сделать.

Кроме того, Smashing Magazine недавно начал кэшировать веб-шрифты в локальном хранилище. В этой статье рассказывается об улучшениях производительности, реализованных в последнее время на их сайте, отдельно отмечается перенос веб-шрифтов в локальное хранилище как наиболее эффективное улучшение.

Примечание о приватном просмотре в браузерах

Судя по отчету caniuse.com, если браузер запущен в приватном режиме или режиме инкогнито, Safari, iOS Safari, и Android browsers не поддерживают работу локального хранилища.

Другие браузеры, такие как Chrome и Firefox, позволяют хранить данные в локальном хранилище при приватном режиме, но после выхода из этого режима они удаляются. Это происходит из-за проблем конфиденциальности, так как кто-то может использовать постоянно хранящиеся данные, чтобы узнать о действиях пользователя при приватном режиме.

Это может сломать поведение вашего приложения, если установленное значение при первом визите ожидается и при повторном визите. Итак, для того, чтобы безопасно использовать локальное хранилище, необходимо проверять его на способность получать и устанавливать значения.

Дополнительные сведения о поведении локального хранилища в приватном режиме и о том, как проверить контент локального хранилища в различных браузерах, вы можете узнать из статьи «Не забывайте проверять режим приватного просмотра при тестировании».

Выводы

Может быть, нам пора пересмотреть локальное хранилище данных и возможность его применения. Особенно это касается мобильных устройств, на которых его можно использовать для сокращения времени задержек. Мы можем начать думать о новых способах кэширования ресурсов, а затем мгновенно отдавать их нашим пользователям. При этом мы уже видели несколько удачных реализаций нетрадиционного использования локального хранилища.