JSON Performance comparison of eval, new Function and JSON

Sunday, March 22, 2009

We parse a JSON string to JSON object when we handle response of server in AJAX.We use eval or new Function to parse JSON string normally, and IE8 and Firefox3.1 has a native JSON support( Native JSON parsing is much faster).How can we choose from the three methods in practice? And how can we know whose performance is the best since there are so many browers?

Code & Concern

defined a json string and circle numbers

        1: var count = 10000, o = null, i = 0, jsonString = '{"value":{"items": [{"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}';

parse json string and record time

eval

       1: var beginTime = new Date();

       2: for ( i = 0; i < count; i++ ) {

       3:     o = eval( "(" + jsonString + ")" );

       4: }

       5: Console.output( "eval:" + ( new Date() - beginTime ) );

new Function

       1: var beginTime = new Date();

       2: for ( i = 0; i < count; i++ ) {

       3:     o = new Function( "return " + jsonString )();

       4: }

       5: Console.output( "new Function:" + ( new Date() - beginTime ) );

native

       1: if ( typeof JSON !== "undefined" ) {

       2:     var beginTime = new Date();

       3:     for ( i = 0; i < count; i++ ) {

       4:         o = JSON.parse( jsonString );     }

       5:     Console.output( "native:" + ( new Date() - beginTime ) );

       6: } else {

       7:     Console.output( "native:not support!" );

       8: }

Browsers

It includes IE6, 7 , 8; Firefox2, 3, 3.1; Chrome; Opera and Safari3, 4.

Environment

T9300 CPU + 4G RAM + Windows2003, IE8 in Vista, IE7 in another machine( 2G CPU + 2G RAM + Windows2003 )

Result

*The smaller the number is,the better the result will be.

*The column in green shows the best performance, while in red shows the worst.

Firefox2, 3 gain the worst performance, IE6 better than IE7( may be related with machines ), Chrome and Safari4 are far superior to other browsers.

Genally speaking, eval is better than new Function,though they have different results in different browsers. But the "new Function" is the double performance of eval in Firefox, so we wrap a class to parse json string to gain better performance in cross-browser.

wrapper

       1: var __json = null;

       2: if ( typeof JSON !== "undefined" ) {

       3:     __json = JSON;

       4: }

       5: var browser = Browser;

       6: var JSON = {

       7:     parse: function( text ) {

       8:         if ( __json !== null ) {

       9:             return __json.parse( text );

      10:         }

      11:         if ( browser.gecko ) {

      12:             return new Function( "return " + text )();

      13:         }

      14:         return eval( "(" + text + ")" )

      15:     }

      16: };          

      17: var beginTime = new Date();

      18: for ( i = 0; i < count; i++ ) {

      19:     o = JSON.parse( jsonString ); }

      20: Console.output( "wrapper:" + ( new Date() - beginTime ) );

The results with wrapper:

After wrapping, it is slower than before due to the cost, but it offers a guarantee to call better implementation.

Conclusion

We should choose a different method when using different browsers:

choose eval in IE6, 7
choose native JSON in IE8
choose new Function in Firefox2, 3
choose eval in Safari4
eval has the same performance as new Function on the whole when you use the other browsers.

Hope this helps,

Andy

Update:

2009.03.23: Disabled all Firefox' Add-Ons

someone told me got a different result after he ran the code in Firefox, I doubt Firefox’s Add-Ons conduces to wrong result, so I run it after I disabled Firebug.

We made a mistake in tests about Firefox, but it is not good enough to our without Firebug.

2009.03.31: Use different Json strings in the loops

according to Oliver' reply, modify code:

       1: for ( i = 0; i < count; i++ ) {

       2:     o = eval("(" + '{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}' + ")");

       3: }

result:

opera is best performance, but Ie8 is better than chrome and safari.

main code:

       1: //test code

       2: var count = 10000, o = null, i = 0, jsonString = "";

       3:  

       4: //eval

       5: var beginTime = new Date();

       6: for ( i = 0; i < count; i++ ) {

       7:     o = eval("(" + '{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}' + ")");

       8: }

       9: Console.output( "eval:" + ( new Date() - beginTime ) );

//new Function

beginTime = new Date();

for ( i = 0; i < count; i++ ) {

    o = new Function("return " + '{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}')();

}

Console.output( "new Function:" + ( new Date() - beginTime ) );

//native

if ( typeof JSON !== "undefined" ) {

    beginTime = new Date();

    for ( i = 0; i < count; i++ ) {

        o = JSON.parse('{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}');

    }

    Console.output( "native:" + ( new Date() - beginTime ) );

} else {

    Console.output( "native:not support!" );

}

//wrapper

var __json = null;

if ( typeof JSON !== "undefined" ) {

    __json = JSON;

}

var browser = Browser;

var JSON = {

    parse: function( text ) {

        if ( __json !== null ) {

            return __json.parse( text );

        }

        if ( browser.gecko ) {

            return new Function( "return " + text )();

        }

        return eval( "(" + text + ")" )

    }

};          

beginTime = new Date();

for ( i = 0; i < count; i++ ) {

    o = JSON.parse('{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}');

}

Console.output( "wrapper:" + ( new Date() - beginTime ) );

Source:

       1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

       2: <html>

       3:     <head>

       4:         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

       5:         <title>Parse JsonString</title>

       6:     </head>

       7:     <body>

       8:         <div id="consoleRegion"></div>

       9:         <script type="text/javascript">

            //yui

            var Browser = function() {

                var o = {

                    ie: 0,

                    opera: 0,

                    gecko: 0,

                    webkit: 0

                };

                var ua = navigator.userAgent, m;

                if ( ( /KHTML/ ).test( ua ) ) {

                    o.webkit = 1;

                }

                // Modern WebKit browsers are at least X-Grade

                m = ua.match(/AppleWebKit\/([^\s]*)/);

                if (m&&m[1]) {

                    o.webkit=parseFloat(m[1]);

                }

  

                if (!o.webkit) { // not webkit

                    // @todo check Opera/8.01 (J2ME/MIDP; Opera Mini/2.0.4509/1316; fi; U; ssr)

                    m=ua.match(/Opera[\s\/]([^\s]*)/);

                    if (m&&m[1]) {

                        o.opera=parseFloat(m[1]);

                    } else { // not opera or webkit

                        m=ua.match(/MSIE\s([^;]*)/);

                        if (m&&m[1]) {

                            o.ie=parseFloat(m[1]);

                        } else { // not opera, webkit, or ie

                            m=ua.match(/Gecko\/([^\s]*)/);

                            if (m) {

                                o.gecko=1; // Gecko detected, look for revision

                                m=ua.match(/rv:([^\s\)]*)/);

                                if (m&&m[1]) {

                                    o.gecko=parseFloat(m[1]);

                                }

                            }

                        }

                    }

                }

                return o;

            }();

  

            var Console = {

                consoleRegion: null,

  

                getRegion: function() {

                    if ( this.consoleRegion === null ) {

                        this.consoleRegion = document.getElementById( "consoleRegion" );

                    }

                    return this.consoleRegion;

                },

  

                output: function( text ) {                     this.getRegion().innerHTML += "<br/>" + text;                 }

            };

            //test code

            var count = 10000, o = null, i = 0, jsonString = '{"value":{"items": [{"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}';

            //eval

            var beginTime = new Date();

            for ( i = 0; i < count; i++ ) {

                o = eval( "(" + jsonString + ")" );

            }

            Console.output( "eval:" + ( new Date() - beginTime ) );

            //new Function

            beginTime = new Date();

            for ( i = 0; i < count; i++ ) {

                o = new Function( "return " + jsonString )();

            }

            Console.output( "new Function:" + ( new Date() - beginTime ) );

            //native

            if ( typeof JSON !== "undefined" ) {

                beginTime = new Date();

                for ( i = 0; i < count; i++ ) {

                    o = JSON.parse( jsonString );                 }

                Console.output( "native:" + ( new Date() - beginTime ) );

            } else {

                Console.output( "native:not support!" );

            }

            //wrapper

            var __json = null;

            if ( typeof JSON !== "undefined" ) {

                __json = JSON;

            }

            var browser = Browser;

            var JSON = {

                parse: function( text ) {

                    if ( __json !== null ) {

                        return __json.parse( text );

                    }

                    if ( browser.gecko ) {

                        return new Function( "return " + text )();

                    }

                    return eval( "(" + text + ")" )

                }

            };          

            beginTime = new Date();

            for ( i = 0; i < count; i++ ) {

                o = JSON.parse( jsonString );             }

            Console.output( "wrapper:" + ( new Date() - beginTime ) );

            //alert( o.value.items[0].z );

        </script>

    </body>

</html>

The problem with this is that both Nitro (the main webkit js engine) and V8 (the js engine used by chrome) cache eval code -- that's why they are an order of magnitude faster than the other browsers in your test (there are actually sites that loop over eval with a constant string :-/ ); based on the numbers i would guess V8 caches the results of new Function as well -- you may want to try making the loops use different strings for eval/new Function in order to get a more real world measurement of JSON parsing performance -- eg. appending a number (in comments should be sufficient i think) so that you get the true cost of parsing/compilation.

Oliver - Friday, March 27, 2009 11:09:00 PM

@Oliver:
thanks, you are right.

gOODiDEA - Tuesday, March 31, 2009 2:11:50 AM

Browsers have different performance for string concatenation, that part should be left out of the timing, that could be interfering with the result. A pre-built array of JSON strings would be better.

Johnny - Wednesday, May 20, 2009 4:30:12 AM

Safari 4.0.3 and Chrome 3 have native JSON implementations now.

Oliver - Wednesday, September 30, 2009 10:58:01 PM

i thing new Function() is good....

Krishan Kumar - Thursday, August 25, 2011 7:39:40 PM

I recently got an B&D lst220 battery powered trimmer and after using it, I would not get another
gas powered string trimmer.

Redd - Thursday, June 28, 2012 3:12:07 AM

This website was... how do I say it? Relevant!!
Finally I have found something that helped me.
Kudos!

Pratt - Friday, March 8, 2013 8:31:26 PM

Hi, every time i used to check webpage posts here early in the break of day, for the
reason that i love to learn more and more.

Branch - Saturday, April 6, 2013 10:24:49 PM

Definitely believe that which you said. Your favorite
justification seemed to be on the net the easiest thing to be aware of.
I say to you, I definitely get irked while people think about
worries that they plainly do not know about. You managed to hit the nail upon the top as well as defined out the whole thing without
having side-effects , people can take a signal.
Will likely be back to get more. Thanks

Aiken - Saturday, March 15, 2014 3:21:01 PM

9 Comments