Web Worker JSON vs String (v5)

Revision 5 of this benchmark created on


Description

Comparing the run times of web workers when passing a JSON object vs passing a string that must be parsed in order to be worked with, and now also compared to using transferable object.

Setup

var passCode = "self.onmessage = function (e){ var json = e.data; postMessage('done') };";
    
    var parseCode = "self.onmessage = function (e){ var json = JSON.parse(e.data); postMessage('done') }";
    
    var parseBlob = new Blob([parseCode], {
        type: 'text/javascript'
    });
    
    var passBlob = new Blob([passCode], {
        type: 'text/javascript'
    });
    var parseWorker = new Worker(window.URL.createObjectURL(parseBlob));
    var passWorker = new Worker(window.URL.createObjectURL(passBlob));
    
    var object = {
        "left": 0,
        "top": 0,
        "width": 400,
        "height": 400,
        "borderLeft": 0,
        "borderTop": 0,
        "borderWidth": 400,
        "borderHeight": 400,
        "contentLeft": 0,
        "contentTop": 0,
        "contentWidth": 400,
        "contentHeight": 400,
        "paddingLeft": 0,
        "paddingTop": 0,
        "paddingWidth": 400,
        "paddingHeight": 400,
        "items": [
            {
                "left": 0,
                "top": 0,
                "width": 400,
                "height": 400,
                "borderLeft": 0,
                "borderTop": 0,
                "borderWidth": 400,
                "borderHeight": 400,
                "contentLeft": 0,
                "contentTop": 0,
                "contentWidth": 400,
                "contentHeight": 400,
                "paddingLeft": 0,
                "paddingTop": 0,
                "paddingWidth": 400,
                "paddingHeight": 400,
                "items": [
                    {
                        "left": 0,
                        "top": 0,
                        "width": 100,
                        "height": 300,
                        "borderLeft": 0,
                        "borderTop": 0,
                        "borderWidth": 100,
                        "borderHeight": 300,
                        "contentLeft": 0,
                        "contentTop": 0,
                        "contentWidth": 100,
                        "contentHeight": 300,
                        "paddingLeft": 0,
                        "paddingTop": 0,
                        "paddingWidth": 100,
                        "paddingHeight": 300
                    },
                    {
                        "left": 100,
                        "top": 0,
                        "width": 33.333333333333336,
                        "height": 300,
                        "borderLeft": 100,
                        "borderTop": 0,
                        "borderWidth": 33.333333333333336,
                        "borderHeight": 300,
                        "contentLeft": 100,
                        "contentTop": 0,
                        "contentWidth": 33.333333333333336,
                        "contentHeight": 300,
                        "paddingLeft": 100,
                        "paddingTop": 0,
                        "paddingWidth": 33.333333333333336,
                        "paddingHeight": 300
                    },
                    {
                        "left": 133.33333333333334,
                        "top": 0,
                        "width": 66.66666666666667,
                        "height": 400,
                        "borderLeft": 133.33333333333334,
                        "borderTop": 0,
                        "borderWidth": 66.66666666666667,
                        "borderHeight": 400,
                        "contentLeft": 133.33333333333334,
                        "contentTop": 0,
                        "contentWidth": 66.66666666666667,
                        "contentHeight": 400,
                        "paddingLeft": 133.33333333333334,
                        "paddingTop": 0,
                        "paddingWidth": 66.66666666666667,
                        "paddingHeight": 400,
                        "items": [
                            {
                                "left": 0,
                                "top": 0,
                                "width": 66.66666666666667,
                                "height": 400,
                                "borderLeft": 0,
                                "borderTop": 0,
                                "borderWidth": 66.66666666666667,
                                "borderHeight": 400,
                                "contentLeft": 0,
                                "contentTop": 0,
                                "contentWidth": 66.66666666666667,
                                "contentHeight": 400,
                                "paddingLeft": 0,
                                "paddingTop": 0,
                                "paddingWidth": 66.66666666666667,
                                "paddingHeight": 400
                            }
                        ]
                    },
                    {
                        "left": 200,
                        "top": 0,
                        "width": 200,
                        "height": 200,
                        "borderLeft": 200,
                        "borderTop": 0,
                        "borderWidth": 200,
                        "borderHeight": 200,
                        "contentLeft": 200,
                        "contentTop": 0,
                        "contentWidth": 200,
                        "contentHeight": 200,
                        "paddingLeft": 200,
                        "paddingTop": 0,
                        "paddingWidth": 200,
                        "paddingHeight": 200,
                        "items": [
                            {
                                "left": 0,
                                "top": 0,
                                "width": 50,
                                "height": 150,
                                "borderLeft": 0,
                                "borderTop": 0,
                                "borderWidth": 50,
                                "borderHeight": 150,
                                "contentLeft": 0,
                                "contentTop": 0,
                                "contentWidth": 50,
                                "contentHeight": 150,
                                "paddingLeft": 0,
                                "paddingTop": 0,
                                "paddingWidth": 50,
                                "paddingHeight": 150
                            },
                            {
                                "left": 50,
                                "top": 0,
                                "width": 16.666666666666668,
                                "height": 150,
                                "borderLeft": 50,
                                "borderTop": 0,
                                "borderWidth": 16.666666666666668,
                                "borderHeight": 150,
                                "contentLeft": 50,
                                "contentTop": 0,
                                "contentWidth": 16.666666666666668,
                                "contentHeight": 150,
                                "paddingLeft": 50,
                                "paddingTop": 0,
                                "paddingWidth": 16.666666666666668,
                                "paddingHeight": 150
                            },
                            {
                                "left": 66.66666666666667,
                                "top": 0,
                                "width": 33.333333333333336,
                                "height": 200,
                                "borderLeft": 66.66666666666667,
                                "borderTop": 0,
                                "borderWidth": 33.333333333333336,
                                "borderHeight": 200,
                                "contentLeft": 66.66666666666667,
                                "contentTop": 0,
                                "contentWidth": 33.333333333333336,
                                "contentHeight": 200,
                                "paddingLeft": 66.66666666666667,
                                "paddingTop": 0,
                                "paddingWidth": 33.333333333333336,
                                "paddingHeight": 200,
                                "items": [
                                    {
                                        "left": 0,
                                        "top": 0,
                                        "width": 33.333333333333336,
                                        "height": 200,
                                        "borderLeft": 0,
                                        "borderTop": 0,
                                        "borderWidth": 33.333333333333336,
                                        "borderHeight": 200,
                                        "contentLeft": 0,
                                        "contentTop": 0,
                                        "contentWidth": 33.333333333333336,
                                        "contentHeight": 200,
                                        "paddingLeft": 0,
                                        "paddingTop": 0,
                                        "paddingWidth": 33.333333333333336,
                                        "paddingHeight": 200
                                    }
                                ]
                            },
                            {
                                "left": 100,
                                "top": 0,
                                "width": 100,
                                "height": 100,
                                "borderLeft": 100,
                                "borderTop": 0,
                                "borderWidth": 100,
                                "borderHeight": 100,
                                "contentLeft": 100,
                                "contentTop": 0,
                                "contentWidth": 100,
                                "contentHeight": 100,
                                "paddingLeft": 100,
                                "paddingTop": 0,
                                "paddingWidth": 100,
                                "paddingHeight": 100
                            }
                        ]
                    }
                ]
            }
        ]
    };
    
    var shortObject = {
        "a": 0,
        "b": 0,
        "c": 400,
        "d": 400,
        "e": 0,
        "f": 0,
        "g": 400,
        "h": 400,
        "i": 0,
        "j": 0,
        "k": 400,
        "l": 400,
        "m": 0,
        "n": 0,
        "o": 400,
        "p": 400,
        "items": [
            {
                "a": 0,
                "b": 0,
                "c": 400,
                "d": 400,
                "e": 0,
                "f": 0,
                "g": 400,
                "h": 400,
                "i": 0,
                "j": 0,
                "k": 400,
                "l": 400,
                "m": 0,
                "n": 0,
                "o": 400,
                "p": 400,
                "items": [
                    {
                        "a": 0,
                        "b": 0,
                        "c": 100,
                        "d": 300,
                        "e": 0,
                        "f": 0,
                        "g": 100,
                        "h": 300,
                        "i": 0,
                        "j": 0,
                        "k": 100,
                        "l": 300,
                        "m": 0,
                        "n": 0,
                        "o": 100,
                        "p": 300
                    },
                    {
                        "a": 100,
                        "b": 0,
                        "c": 33.333333333333336,
                        "d": 300,
                        "e": 100,
                        "f": 0,
                        "g": 33.333333333333336,
                        "h": 300,
                        "i": 100,
                        "j": 0,
                        "k": 33.333333333333336,
                        "l": 300,
                        "m": 100,
                        "n": 0,
                        "o": 33.333333333333336,
                        "p": 300
                    },
                    {
                        "a": 133.33333333333334,
                        "b": 0,
                        "c": 66.66666666666667,
                        "d": 400,
                        "e": 133.33333333333334,
                        "f": 0,
                        "g": 66.66666666666667,
                        "h": 400,
                        "i": 133.33333333333334,
                        "j": 0,
                        "k": 66.66666666666667,
                        "l": 400,
                        "m": 133.33333333333334,
                        "n": 0,
                        "o": 66.66666666666667,
                        "p": 400,
                        "items": [
                            {
                                "a": 0,
                                "b": 0,
                                "c": 66.66666666666667,
                                "d": 400,
                                "e": 0,
                                "f": 0,
                                "g": 66.66666666666667,
                                "h": 400,
                                "i": 0,
                                "j": 0,
                                "k": 66.66666666666667,
                                "l": 400,
                                "m": 0,
                                "n": 0,
                                "o": 66.66666666666667,
                                "p": 400
                            }
                        ]
                    },
                    {
                        "a": 200,
                        "b": 0,
                        "c": 200,
                        "d": 200,
                        "e": 200,
                        "f": 0,
                        "g": 200,
                        "h": 200,
                        "i": 200,
                        "j": 0,
                        "k": 200,
                        "l": 200,
                        "m": 200,
                        "n": 0,
                        "o": 200,
                        "p": 200,
                        "items": [
                            {
                                "a": 0,
                                "b": 0,
                                "c": 50,
                                "d": 150,
                                "e": 0,
                                "f": 0,
                                "g": 50,
                                "h": 150,
                                "i": 0,
                                "j": 0,
                                "k": 50,
                                "l": 150,
                                "m": 0,
                                "n": 0,
                                "o": 50,
                                "p": 150
                            },
                            {
                                "a": 50,
                                "b": 0,
                                "c": 16.666666666666668,
                                "d": 150,
                                "e": 50,
                                "f": 0,
                                "g": 16.666666666666668,
                                "h": 150,
                                "i": 50,
                                "j": 0,
                                "k": 16.666666666666668,
                                "l": 150,
                                "m": 50,
                                "n": 0,
                                "o": 16.666666666666668,
                                "p": 150
                            },
                            {
                                "a": 66.66666666666667,
                                "b": 0,
                                "c": 33.333333333333336,
                                "d": 200,
                                "e": 66.66666666666667,
                                "f": 0,
                                "g": 33.333333333333336,
                                "h": 200,
                                "i": 66.66666666666667,
                                "j": 0,
                                "k": 33.333333333333336,
                                "l": 200,
                                "m": 66.66666666666667,
                                "n": 0,
                                "o": 33.333333333333336,
                                "p": 200,
                                "items": [
                                    {
                                        "a": 0,
                                        "b": 0,
                                        "c": 33.333333333333336,
                                        "d": 200,
                                        "e": 0,
                                        "f": 0,
                                        "g": 33.333333333333336,
                                        "h": 200,
                                        "i": 0,
                                        "j": 0,
                                        "k": 33.333333333333336,
                                        "l": 200,
                                        "m": 0,
                                        "n": 0,
                                        "o": 33.333333333333336,
                                        "p": 200
                                    }
                                ]
                            },
                            {
                                "a": 100,
                                "b": 0,
                                "c": 100,
                                "d": 100,
                                "e": 100,
                                "f": 0,
                                "g": 100,
                                "h": 100,
                                "i": 100,
                                "j": 0,
                                "k": 100,
                                "l": 100,
                                "m": 100,
                                "n": 0,
                                "o": 100,
                                "p": 100
                            }
                        ]
                    }
                ]
            }
        ]
    };
    
    var compactObject = [[0,0,400,400,0,0,400,400,0,0,400,400,0,0,400,400],[[[0,0,400,400,0,0,400,400,0,0,400,400,0,0,400,400],[[[0,0,100,300,0,0,100,300,0,0,100,300,0,0,100,300],[]],[[100,0,33.333333333333336,300,100,0,33.333333333333336,300,100,0,33.333333333333336,300,100,0,33.333333333333336,300],[]],[[133.33333333333334,0,66.66666666666667,400,133.33333333333334,0,66.66666666666667,400,133.33333333333334,0,66.66666666666667,400,133.33333333333334,0,66.66666666666667,400],[[[0,0,66.66666666666667,400,0,0,66.66666666666667,400,0,0,66.66666666666667,400,0,0,66.66666666666667,400],[]]]],[[200,0,200,200,200,0,200,200,200,0,200,200,200,0,200,200],[[[0,0,50,150,0,0,50,150,0,0,50,150,0,0,50,150],[]],[[50,0,16.666666666666668,150,50,0,16.666666666666668,150,50,0,16.666666666666668,150,50,0,16.666666666666668,150],[]],[[66.66666666666667,0,33.333333333333336,200,66.66666666666667,0,33.333333333333336,200,66.66666666666667,0,33.333333333333336,200,66.66666666666667,0,33.333333333333336,200],[[[0,0,33.333333333333336,200,0,0,33.333333333333336,200,0,0,33.333333333333336,200,0,0,33.333333333333336,200],[]]]],[[100,0,100,100,100,0,100,100,100,0,100,100,100,0,100,100],[]]]]]]]];

Teardown


    parseWorker.terminate();
    passWorker.terminate();
  

Test runner

Ready to run.

Testing in
TestOps/sec
Pass JSON
// async test
passWorker.onmessage = function(){
deferred.resolve();
};
passWorker.postMessage(object);
ready
Pass String
// async test
parseWorker.onmessage = function(){
deferred.resolve();
};
parseWorker.postMessage(JSON.stringify(object));
ready
Pass JSON Short
// async test
passWorker.onmessage = function(){
deferred.resolve();
};
passWorker.postMessage(shortObject);
ready
Pass String Short
// async test
parseWorker.onmessage = function(){
deferred.resolve();
};
parseWorker.postMessage(JSON.stringify(shortObject));
ready
Pass Compact Object
// async test
passWorker.onmessage = function(){
deferred.resolve();
};
passWorker.postMessage(compactObject);
ready
Pass Compact String
// async test
parseWorker.onmessage = function(){
deferred.resolve();
};
parseWorker.postMessage(JSON.stringify(compactObject));
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by lexander on
  • Revision 2: published by lexander on
  • Revision 3: published by bracket on
  • Revision 4: published by fafsdfssad on
  • Revision 5: published on