I have a webworker doing some expensive off-screen calculation. It sends data back to the main thread in roughly 20ms increments for animation.
The worker results are contained in an array of objects which can get up to 2000 rows. In order to pass it back to the main thread I'm using stringify (at the web worker side) and parse (in the main thread). The process is currently slow at both ends.
As not all data contained within the objects are required for animation I tried writing a replacer function to reduce the amount of data being sent (truncating some long floats and omitting some fields entirely). This however made the situation worse.
Below is a timed simulation of the stringify/parse process along with my failed attempt to improve it.
Any suggestions on how to improve this would be appreciated.
let myArray = [];
//Add 2000 'things'
for (let i = 0; i < 2000; i++) {
let newObject = {};
newObject.ID = i;
newObject.percent = 100;
newObject.nestedArray = [1, 2, 3, 4, 5];
newObject.X = 78940;
newObject.Y = 893402;
newObject.detailedFloat1 = Math.random() * Math.random();
newObject.detailedFloat2 = Math.random() * Math.random();
newObject.detailedFloat3 = Math.random() * Math.random();
newObject.detailedFloat4 = Math.random() * Math.random();
newObject.text = "this is some text";
newObject.text2 = "this is some more text";
newObject.foreignKey = 12356;
myArray.push(newObject);
}
//start a timer
let myTimer = new Date();
//stringify it
let arrayAsString = JSON.stringify(myArray);
let t1Result = new Date() - myTimer;
timer = new Date();
//parse it
let mySecondArray = JSON.parse(arrayAsString);
let t2Result = new Date() - myTimer;
console.log("un-optimised results");
console.log(t1Result + "ms to stringify");
console.log(t2Result + "ms to parse");
console.log(t2Result + t1Result + "ms total");
console.log("-----");
//optimisation attempt 1 - use a replacor
function replacer(key, value) {
// Filtering out properties
if (key == "text" || key == "text2" || key == "foreignKey") {
return undefined;
} else if (typeof (value) == "float" || typeof (value) == "number") {
return Math.round(value * 10000) / 10000;
} else {
return value;
}
}
//start a timer
myTimer = new Date();
//stringify it
arrayAsString = JSON.stringify(myArray, replacer);
t1Result = new Date() - myTimer;
timer = new Date();
//parse it
mySecondArray = JSON.parse(arrayAsString);
t2Result = new Date() - myTimer;
console.log("replacer results");
console.log(t1Result + "ms to stringify");
console.log(t2Result + "ms to parse");
console.log(t2Result + t1Result + "ms total"); //this has actually made performance worse