JSON Performance comparison of eval, new Function and JSON

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>

Published Sunday, March 22, 2009 9:21 AM by gOODiDEA

Comments

# re: JSON Performance comparison of eval, new Function and JSON

Monday, March 23, 2009 3:41 PM by Andreas Kaiser

Trackback in german:

mosenturm.blogspot.com/.../benchmark-parsen-eines-json-strings-in.html

# Interesting Finds: 2009 03.23~03.26

Wednesday, March 25, 2009 8:42 PM by gOODiDEA.NET

Web JSON Performance comparison of eval, new Function and JSON Internet Explorer Global Variable Blow

# re: JSON Performance comparison of eval, new Function and JSON

Friday, March 27, 2009 7:09 PM by Oliver

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.

# re: JSON Performance comparison of eval, new Function and JSON

Monday, March 30, 2009 10:11 PM by gOODiDEA

@Oliver:

thanks, you are right.

# re: JSON Performance comparison of eval, new Function and JSON

Wednesday, May 20, 2009 12:30 AM by Johnny

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.

# 11 keystrokes that made my jQuery selector run 10x faster | Encosia

Tuesday, June 09, 2009 2:45 PM by 11 keystrokes that made my jQuery selector run 10x faster | Encosia

Pingback from 11 keystrokes that made my jQuery selector run 10x faster | Encosia

# ASP.NET MVC Archived Buzz, Page 1

Monday, June 15, 2009 7:01 AM by ASP.NET MVC Archived Buzz, Page 1

Pingback from ASP.NET MVC Archived Buzz, Page 1

# Complex Optimization Guide Part 10. Ajax Optimization | odd creations blog

Wednesday, August 26, 2009 10:39 AM by Complex Optimization Guide Part 10. Ajax Optimization | odd creations blog

Pingback from Complex Optimization Guide Part 10. Ajax Optimization | odd creations blog

# re: JSON Performance comparison of eval, new Function and JSON

Wednesday, September 30, 2009 6:58 PM by Oliver

Safari 4.0.3 and Chrome 3 have native JSON implementations now.

Title (required)
Name (required)
Your URL (optional)
Comments (required)
Remember Me?

gOODiDEA.NET

Search

Tags

Sponsors

Navigation

Archives