Веб-разработка: localStorage против кэшированного HTTP

Question

Допустим, у меня есть веб-сервер, который отвечает на GET с файлом .json.Ответ на этот запрос GET указывает, что браузер кэширует ответ в течение 5 лет.

Допустим, у меня есть веб-страница, которая выполняет этот запрос GET для данных JSON при загрузке страницы.Когда ответ возвращается, данные JSON помещаются в localStorage.

. На этом этапе, если я хочу снова получить эти данные JSON, это будет быстрее:

1. Выборка из localStorage
2. Выполнение еще одного запроса GET Ajax (когда браузер фактически не выполняет запрос - вместо этого он будет обращаться к кешу браузера)

МожетВы доказываете это с помощью автоматизированного теста или примера?

Почему ваш ответ правильный?

Answer 1

Я думаю, что вы задаете неправильный вопрос. Что быстрее во время активного сеанса в основном не имеет значения, потому что оба хранятся локально, а локальный поиск почти мгновенный (против удаленного поиска). (Одно предупреждение: не все браузеры полагаются на заголовки кэширования, но обычно они больше склоняются к избыточному кэшированию, чем к недостаточному кэшированию.)

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

Вместо этого вам следует подумать о долговечности данных и о том, как часто пользователь будет искать их снова.

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

Однако, если данные загружаются регулярно или необходимы при каждом посещении сайта, вам следует использовать localStorage. Локальное хранилище не очищается автоматически с помощью кэша и фактически очищается, только если пользователь очищает файлы cookie для этого веб-сайта. Это позволяет хранить информацию гораздо дольше, даже если веб-сайт не посещается достаточно регулярно для обновления кеша. Но теперь вы вдруг будете нести ответственность за ведение этой базы данных.

Наконец, самый важный вопрос: как разработчик, стоит ли выгодно компромисса с разработкой более сложного решения на основе localStorage? Другими словами, увидите ли вы достаточную выгоду для кэширования конечного пользователя при поиске 1-2 с, или вы говорите о значительном объеме информации, когда пользователь увидит выигрыш 30 с +.

Например, для большого сложного веб-приложения, которое я разработал некоторое время назад, я использовал localStorage для хранения большого количества библиотек JS. При повторном посещении сайта они просто анализировались из локальной копии (после проверки хеша). Это решение позволило широкому кругу браузеров значительно сократить время запуска, даже если кэш был очищен. (Я не говорю, что это хорошее применение, но в то время оно работало.)

Answer 2

Оба источника утверждают, что localStorage превосходит кеш браузера по скорости.

• http://www.mobify.com/blog/smartphone-localstorage-outperforms-browser-cache/
• http://jsperf.com/localstorage-versus-browser-cache

Вот мой взгляд на загрузку файлов JavaScript из localStorage. Код крошечный, вы можете проверить его в моем проекте Github https://github.com/webpgr/cached-webpgr.js или использовать код из полного примера ниже.

Полная библиотека:

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)};

Вызов библиотеки

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){
    requireScript('examplejs', '0.0.3', 'example.js');
});

Answer 3

Различия, если любой из этих двух подходов должен быть незначительным в современных UA (браузерах).

Почему мой ответ правильный, спросите вы?Потому что я реализовал оба этих механизма.