Локальное хранилище является частью HTML5 Web Storage API и позволяет хранить данные в браузере. В отличие от файлов cookie, данные, хранящиеся в локальном хранилище, не отправляются обратно на сервер. Все данные остаются на клиенте, и в настоящее время вы можете хранить от 2 МБ до 10 МБ. Это ограничение привязано к конкретному используемому браузеру, протоколу (HTTP или HTTPS), порту и домену верхнего уровня.
В этой статье мы обсудим, как использовать этот API для повышения производительности сайта. Я предполагаю, что вы знаете, что такое локальное хранилище и какие методы доступны, но если вам нужно освежить память, я предлагаю вам прочитать статью Colin Ihrig « Обзор API веб-хранилища ».
Свободное место на диске
Прежде чем мы начнем обсуждение локального хранилища, я хочу дать вам обзор доступного дискового пространства в основных мобильных и настольных браузерах. Следующие таблицы основаны на статье «Работа с квотой в мобильных браузерах» .
Мобильные браузеры:
| браузер | Хром | Браузер Android | Fire Fox | iOS Safari |
|---|---|---|---|---|
| Версия | 40 | 4,3 | 34 | 6-8 |
| Свободного места | 10MB | 2MB | 10MB | 5МБ |
Настольные браузеры:
| браузер | Хром | опера | Fire Fox | Сафари | Internet Explorer |
|---|---|---|---|---|---|
| Версия | 40 | 27 | 34 | 6-8 | 9-11 |
| Свободного места | 10MB | 10MB | 10MB | 5МБ | 10MB |
Собственный кеш против локального хранилища
При использовании локального хранилища ваши данные будут оставаться на клиенте и сохраняться в течение сеансов и перезагрузок устройства. Как я упоминал во введении, предел локального API хранилища привязан к конкретному браузеру (как показано в предыдущих таблицах), протоколу, порту и используемому домену верхнего уровня. В отличие от этого, пространство, доступное в собственном кэше браузера, распределяется между веб-сайтами, а на мобильных устройствах оно намного меньше. Это часто вспыхивает, иногда даже в течение одного и того же визита. У мобильных устройств есть дополнительная проблема: они менее мощные, чем настольные устройства, поэтому достижение хорошей производительности является обязательным.
Было много дискуссий о производительности локального хранилища. Например, Кристиан Хейлманн, ранее работавший с Mozilla, писал: «Простого решения для локального хранилища не существует» . Локальное хранилище может привести к снижению производительности, если не использовать его осторожно. Первое, что вы должны принять во внимание, это то, что это синхронный API, поэтому он блокирует основной поток пользовательского интерфейса. Локальное хранилище записывает и читает данные с жесткого диска, что может быть гораздо более дорогой операцией, чем чтение из памяти. Чтобы предоставить вам доступ к данным, локальное хранилище должно считывать данные с диска, и именно здесь происходит снижение производительности. Это снижение производительности не является серьезной проблемой для небольших объемов данных, но оно может быть заметно при использовании полного ограничения хранилища.
В качестве хорошей практики старайтесь выполнять как можно меньше чтений. Кроме того, поскольку мы имеем дело с синхронным API, вы должны пытаться читать данные из локального хранилища только после того, как window.onload событие window.onload , чтобы избежать блокировки потока пользовательского интерфейса.
Времена изменились
Но все становится лучше. В статье, опубликованной Питером МакЛахланом из Mobify, объясняется, что локальное хранилище может быть в 5 раз быстрее собственного кэша на мобильных устройствах .
В приложении к той же статье вы можете увидеть эволюцию производительности локального хранилища в мобильных браузерах и насколько она улучшилась. Вы также можете видеть, что локальное хранилище всегда было быстрее, чем собственный кеш.
Кто использует локальное хранилище?
Есть несколько недавних случаев, когда веб-сайты использовали локальное хранилище для кэширования ресурсов, например, The Guardian , которые используют локальное хранилище для критического пути CSS. Вы можете просмотреть эту презентацию, представленную на конференции Velocity 2014, чтобы понять, как они могут это сделать.
Также Smashing Magazine недавно начал кэшировать веб-шрифты в локальном хранилище. В этой статье о некоторых улучшениях производительности, реализованных недавно на их веб-сайте, они сообщают об отсрочке веб-шрифтов и кэшировании их в локальном хранилище среди изменений, которые привели к наиболее эффективным улучшениям.
Примечание о приватном просмотре
Как сообщается на сайте caniuse.com , на вкладке известные проблемы при работе в приватном режиме или режиме инкогнито браузеры Safari, iOS Safari и Android не поддерживают настройку элементов в локальном хранилище.
Другие браузеры, такие как Chrome и Firefox, позволяют хранить данные в локальном хранилище в частном режиме, но данные удаляются при выходе из частного режима. Это связано с проблемами конфиденциальности, так как кто-то может использовать постоянные данные, чтобы узнать о действиях пользователя в частном режиме.
Эта проблема может нарушить поведение вашего приложения, если ожидается, что значение, установленное в предыдущем сеансе, будет присутствовать при последующем посещении. Таким образом, для безопасного использования локального хранилища рекомендуется проверять не только поддержку, но и способность получать и устанавливать элементы.
Для получения дополнительной информации о поведении локального хранилища в частном режиме и о том, как проверить содержимое локального хранилища в разных браузерах, вы можете использовать статью «Не забывайте проверять режим частного просмотра при тестировании» в качестве справочного материала.
Вывод
Возможно, пришло время пересмотреть локальное хранилище и его потенциальное использование, особенно на мобильных устройствах, где мы можем использовать его, чтобы избежать узких мест задержки. Мы можем начать думать о новых способах кэширования наших активов, а затем сразу же предоставлять их нашим пользователям. Мы видели, что уже есть несколько успешных реализаций использования локального хранилища нетрадиционными способами.