CODEWITHSUNDEEP
javascriptjsonparsing
user9943329
user9943329

Reputation:

Performance of JSON Parse/Stringify

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?

Upvotes: 11

Views: 28438

Answers (4)

Cristian Batista
Cristian Batista

Reputation: 281

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

Upvotes: -1

wiesion
wiesion

Reputation: 2445

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');

Upvotes: 2

filippo
filippo

Reputation: 3077

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);

Upvotes: 2

Drag13
Drag13

Reputation: 5988

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:

enter image description here https://caniuse.com/#search=indexeddb

Hope this helps

Upvotes: 5

Related Questions