Array and Object Serialization & Deserialization

Intro

I would love to find a faster way to handle serialization and deserialization of JavaScript objects. For this post, I will maintain the use of JSON.parse throughout, but I will change the complexity of what I am parsing. For round one, I compare a normal JavaScript object with keys versus an array.

Round 1

Setup

var arr = [];
var obj = {};
for(var i = 0; i < 1000; i++){
  obj[i] = arr[i] = String.fromCharCode(i);
}

Test

var results = [];
/*replace with obj for the object test*/
var str = JSON.stringify(arr); 
for(var i = 0; i < 10000; i++){
    var d0 = performance.now();
/*trying to discourage an optimized parse 
  by lengthening the string*/
    var foo = JSON.parse(str += ' '); 
    var d1 = performance.now();
    results.push(d1 - d0);
}
var sum = results.reduce((a,b)=>a+b,0);
console.log(sum, sum / results.length);

Array – 1047.9999999403954 0.10479999999403954 Object – 2012.0000000596046 0.20120000000596047

With this scenario, you might be able to expect faster parsing for the array. This makes sense considering that keys are not being parsed.

Round 2

For this round I will imagine that I have an array of objects that look like the following:

   [ ..., 
      {
         pageNumber:2,
         content:'Some page content here',
         comments:'Some comment about the page'
      },
      ...
   ]

Setup

var str = '';
for(var i = 0; i < 6000; i++){
    str += String.fromCharCode(i);
}
var objArr = [];

var pageNumberArr = [],
    comments = [],
    content = [];
for(var p = 0; p < 1000; p++){
    objArr.push({
    pageNumber:p,
        comments:`Page ${p} is great`,
        content:`Page ${p} ${str}`
    });

    pageNumberArr.push(p);
    comments.push(`Page ${p} is great`);
    content.push(`Page ${p} ${str}`);

}

var objApproachStr = JSON.stringify(objArr); // length is 6213671
var arrayApproachStr = JSON.stringify([pageNumberArr, comments, content]); // length is 6177677
var pageNumbersStr = JSON.stringify(pageNumberArr);
var commentsStr = JSON.stringify(comments);
var contentStr = JSON.stringify(content);

Test

Array of Objects
var results = [];

for(var i = 0; i < 1000; i++){
    var d0 = performance.now(); 
    var pageData = JSON.parse(objApproachStr += ' ');
        var d1 = performance.now();
    results.push(d1 - d0);
}

var sum = results.reduce((a,b)=>a+b,0);
console.log(sum, sum / results.length);
Object deserialization:

TOTAL: 64531.99499999988 ms AVG: 64.53199499999988 ms

Array of Arrays
var results = [];

for(var i = 0; i < 1000; i++){
    var d0 = performance.now(); 
    var arrayOfArrays = JSON.parse(arrayApproachStr += ' ');
    var pageNumbers = arrayOfArrays[0];
    var comments = arrayOfArrays[1];
    var contents = arrayOfArrays[2];
    var pageData = [];
    for(var j = 0; j < pageNumbers.length; j++){
    pageData.push({
            pageNumber:pageNumbers[j],
            comments:comments[j],
            content:content[j]
        });
    }
    var d1 = performance.now();
    results.push(d1 - d0);
}

var sum = results.reduce((a,b)=>a+b,0);
console.log(sum, sum / results.length);
Nested Array Deserialization

TOTAL: 63723.005000000056 AVG: 63.72300500000006

Separated Arrays
var results = [];

for(var i = 0; i < 1000; i++){
    var d0 = performance.now(); 
    var pageNumbers = JSON.parse(pageNumbersStr);
    var comments = JSON.parse(commentsStr);
    var contents = JSON.parse(contentStr);
    var pageData = [];
    for(var j = 0; j < pageNumbers.length; j++){
    pageData.push({
            pageNumber:pageNumbers[j],
            comments:comments[j],
            content:content[j]
        });
    }
    var d1 = performance.now();
    results.push(d1 - d0);
}

var sum = results.reduce((a,b)=>a+b,0);
console.log(sum, sum / results.length);
Multiple Array Deserialization

TOTAL: 55287.990000000005 ms AVG 55.28799000000001

Analysis

Round 1 showed a significant boost when deserializing arrays versus objects. Round 2 showed that deserializing multiple arrays versus a single array of objects with multiple properties may be faster. I suspect that the more complex the objects become, the less of an advantage that the arrays will have.

You may also like