I want to store a maximum of around 10 thousand integers in sessionStorage. I will need to JSON parse and stringify to update this array of integers.
Is this a terrible idea? Or is the performance hit not too bad?
-
1With performance the advice is always to try it and see. 10k items shouldn't be a performance slowdown, though.IrkenInvader– IrkenInvader2018-06-22 16:19:46 +00:00Commented Jun 22, 2018 at 16:19
-
1Just done a quick test,.. Storing 10,000 integer with stringify and sessionStorage, about 11ms, retrieving from sessionStorage, and parse. about 8ms..Keith– Keith2018-06-22 16:33:38 +00:00Commented Jun 22, 2018 at 16:33
-
depends on where/when he does it then. 11ms will almost certainly drop a frame, and I'm presuming you didn't test on a medium to low end device? might be kinda bad on a older phone.dgeare– dgeare2018-06-22 16:36:33 +00:00Commented Jun 22, 2018 at 16:36
-
OP, any chance you can use web workers for some of the work?dgeare– dgeare2018-06-22 16:38:40 +00:00Commented Jun 22, 2018 at 16:38
Add a comment
|
4 Answers
You shouldn't use SessionStorage for that purpose because it is blocking main thread that can leads to hanging your application.
Check IndexedDb instead
It designed to be async and more-less fast. And also it has pretty nice support:
https://caniuse.com/#search=indexeddb
Hope this helps
4 Comments
Drag13
@Keith Agree. But if he already has to store 10 000 items, that there is a non null possibility that this number will grow. And grow :) So, at least it worth checking, I think.
Drag13
@TimMorris Sure, it's up to you to design the solution. I just want to mention that changing approach from sync to async can take some time. And as other mentioned, Core I7 and Intel Atom will have very different performance ;)
As @IrkenInvader said test and measure on your reference browser(eg. on low end mobile device parsing can be much slower).
A quick test:
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var numbers = Array.apply(null, {length: 10000}).map(Function.call, (x) => getRandomInt(100));
var start = window.performance.now();
window.sessionStorage.setItem('test', JSON.stringify(numbers));
var end = window.performance.now();
console.log("timing", end-start);
Comments
It will probably depend on the browser implementation of the JSON module and much more other factors. From my tests in Chrome JSON.stringify will be much faster than Array.join - but when parsing it, String.split seems to be faster. As long as you can rely on the array content to be exclusively numbers, you can just String.slice(-1, 1) the JSON string and then split it.
// Generate 10k/1m numbers in a range of 100 to 300 mio
let intsTK = [], intsM = [], min = 100000000, max = 300000000
for(let i = 0; i < 1000000; i++) {
let r = Math.random() * (max - min) + min
if(i < 10000) intsTK.push(r);
intsM.push(r);
}
function toJSON(array) {
return JSON.stringify(array);
}
function fromJSON(string) {
return JSON.parse(string);
}
function toJoined(array) {
return array.join(",");
}
function fromJoined(string) {
return string.split(",");
}
function fromJSONJoined(string) {
return string.slice(1, -1).split(",");
}
// With 10K
console.time('toJSON_10k');
let jsonTK = toJSON(intsTK);
console.timeEnd('toJSON_10k');
console.time('toJoined_10k');
let joinedTK = toJoined(intsTK);
console.timeEnd('toJoined_10k');
console.time('fromJSON_10k');
fromJSON(jsonTK);
console.timeEnd('fromJSON_10k');
console.time('fromJoined_10k');
fromJoined(joinedTK);
console.timeEnd('fromJoined_10k');
console.time('fromJSONJoined_10k');
fromJSONJoined(jsonTK);
console.timeEnd('fromJSONJoined_10k');
//With 1 million
console.time('toJSON_1m');
let jsonM = toJSON(intsM);
console.timeEnd('toJSON_1m');
console.time('toJoined_1m');
let joinedM = toJoined(intsM);
console.timeEnd('toJoined_1m');
console.time('fromJSON_1m');
fromJSON(jsonM);
console.timeEnd('fromJSON_1m');
console.time('fromJoined_1m');
fromJoined(joinedM);
console.timeEnd('fromJoined_1m');
console.time('fromJSONJoined_1m');
fromJSONJoined(jsonM);
console.timeEnd('fromJSONJoined_1m');
Comments
You can take a look to this page:
https://jsben.ch/wQ9RU
It's a tool for Javascript performance, as you can see there, using [].splice() is better than JSON.parse/JSON.stringify
2 Comments
Kaiido
Ok, maybe, but that's not the question here. Storage API only can store strings.
Phil
If you want a shallow clone of an array (like in your link), then yes,
Array.splice is normally "better" than JSON.parse/JSON.stringify. These functions do very different things, so you shouldn't really make statements about which is generally "better". It depends on the problem.