web-dev-qa-db-fra.com

Performances de JSON Parse/Stringify

Je veux stocker un maximum d'environ 10 000 entiers dans sessionStorage. J'aurai besoin d'analyser et de coder JSON pour mettre à jour ce tableau d'entiers.

Est-ce une idée terrible? Ou est-ce que la performance a frappé pas trop mal?

javascriptjsonparsing
3
Tim Morris

Vous ne devez pas utiliser SessionStorage à cette fin car il bloque le thread principal, ce qui peut entraîner le blocage de votre application. 

Vérifiez IndexedDb à la place 

Il a été conçu pour être asynchrone et plus rapide. Et aussi, il a un joli support:

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

J'espère que cela t'aides

2
Drag13

Comme @IrkenInvader a déclaré test et mesure sur votre navigateur de référence (par exemple, l'analyse des appareils mobiles bas de gamme peut être beaucoup plus lente).

Un test rapide:

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

Vous pouvez consulter cette page: http://jsben.ch/wQ9RU C'est un outil de performance Javascript, comme vous pouvez le voir ici, utiliser [].splice() est meilleur que JSON.parse/JSON.stringify

0
Cristian Batista

Cela dépendra probablement de la mise en oeuvre du module JSON par le navigateur et de bien d’autres facteurs encore. De mes tests dans Chrome, JSON.stringify sera beaucoup plus rapide que Array.join - mais lors de son analyse, String.split semble être plus rapide. Tant que vous pouvez vous fier au contenu du tableau comme étant exclusivement des nombres, vous pouvez simplement String.slice(-1, 1) la chaîne JSON, puis la scinder.

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

0
wiesion