Подтвердить что ты не робот

Скорость/стоимость localStorage

Как быстро поиск значения в localStorage с Javascript?

Есть ли у кого-нибудь ссылки на какие-либо тесты производительности, которые показывают, стоит ли кэшировать данные в объекте JavaScript? Или браузер уже кэширует значения, к которым в любом случае обращаются из localStorage?

Меня особенно интересуют реализации localStorage в Firefox и Chrome.

4b9b3361

Ответ 1

Для чего это стоит, вот тест jsperf.

localStorage использования localStorage значительно медленнее, чем доступ к свойствам обычного объекта как в FF7, так и в IE9. Конечно, это всего лишь микро-эталон, который не обязательно отражает реальное использование или производительность...

Образец, извлеченный из моего прогона FF 7, показывает, что означает "значительно медленнее" в секундах в секунду:

            native     local-storage    notes
small set   374,397    13,657           10 distinct items
large set   2,256      68               100 distinct items
read-bias   10,266     342              1 write, 10 reads, 10 distinct items

Также существуют ограничения на то, что можно поместить в localStorage. YMMV.

Ответ 2

Просто сделал небольшой тест. То, что я планирую сделать, это получить некоторые данные из localStorage довольно часто, и я подумал, будет ли он блокировать. Пока localStorage.getItem является синхронизированной операцией, это может звучать страшно, но так ли это?

  • 1-й тест для вызова миллион раз localStorage, чтобы получить элемент, который существует.
  • 2-й тест для вызова миллион раз localStorage, чтобы получить элемент, который НЕ существует.

Результаты:

"Найденный предмет: 0.0007991071428571318мс за звонок"

"Товар не найден: 0.0006365004639793477ms за звонок"

Короче говоря - просто используйте это. Это не займет много времени. 0,0007 из 1 миллисекунды.

https://jsbin.com/resuziqefa/edit?js,console

 let results = [];
 let sum = 0;
 localStorage.setItem('foo', 'foo bar baz foo bar baz foo bar baz foo');

 for (let i = 0; i < 1000000; i++) {
   let a = performance.now();
   localStorage.getItem('foo');
   let result = performance.now() - a;
   sum += result;
   results.push(result);
 }

 console.log('Item found: ${sum / results.length}ms per call');

 results = [];
 sum = 0;
 for (let i = 0; i < 1000000; i++) {
   let a = performance.now();
   localStorage.getItem('bar');
   let result = performance.now() - a;
   sum += result;
   results.push(result);
 }

 console.log('Item not found: ${sum / results.length}ms per call');

Ответ 3

Яблоки к яблокам

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

Локальное хранилище против файлов cookie

Лучшим сравнением с localStorage было бы сравнение с его классическим аналогом document.cookie. Основным назначением localStorage и document.cookie является сохранение значения при обновлении браузера.

Я собрал пример на codsandbox.io

  • localStorage на два порядка быстрее, чем document.cookie.
  • localStorage Object на порядок быстрее, чем localStorage (не имеет значения, но добавлено для справки).

localStorage - самый быстрый механизм сохранения значений при обновлении браузера.

localstoragevcookies

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