Скорость/стоимость localStorage
Как быстро поиск значения в localStorage с Javascript?
Есть ли у кого-нибудь ссылки на какие-либо тесты производительности, которые показывают, стоит ли кэшировать данные в объекте JavaScript? Или браузер уже кэширует значения, к которым в любом случае обращаются из localStorage?
Меня особенно интересуют реализации localStorage в Firefox и Chrome.
Ответы
Ответ 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 производительности браузера для точных измерений. Все тесты выполняют набор уникальных ключей с последующим получением того же ключа.