Comparison of the performance of JavaScript-parsed Json strings in various browsers

When AJAX is used for interaction between the server and the client, the common practice is to let the server return a JSON string and parse it into a JavaScript object on the client. The method used for parsing is generally eval or new function. At present, IE8 and Firefox3.1 have built-in native JSON objects, which are said to have improved performance ). In actual use, how can we choose from these three methods, because of performance problems, without considering the parsing implemented by javascript? In the face of a large number of browsers, which method of performance is the best?

I. Test Methods

1. specify the number of tests and the JSON string.

   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}';  

2. cyclically parse and record the 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: }

Ii. Test Object

Select mainstream Browsers without Maxthon shell), including IE6, 7, 8, Firefox2, 3, 3.1, Chrome, Opera, Safari3, and 4.

Iii. Test Environment

T9300 CPU + 4g ram + Windows2003, in which IE8 uses the Vista environment, IE7 uses 2g cpu + 2g ram + Windows2003 on another work machine ), considering that the main purpose is to test the performance of the browser client, the error of the result should be acceptable.

Iv. Test Results

* Note 1: the smaller the value, the better.

* Note 2: the green background in the current column indicates the best performance, and the red background indicates the worst performance.

1. Firefox2 and 3 are all at the bottom. The performance of IE6 is better than that of IE7 and may be related to machine inconsistency.) Chrome and Safari4 have far higher performance than other browsers.

2. The performance of eval and new functions in different browsers is inconsistent. In general, eval is better, but the performance of new functions in Firefox is twice that of eval. In order to better be compatible with various browsers, we encapsulate JSON parsing into an object for processing:

◆ 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 ) );

Result After adding Wrapper:

Because of the overhead of the called object, the encapsulated JSON object will be slower than a separate call, but it can ensure that the most suitable method is used in various browsers.

V. Conclusion

When parsing a Json string, different browsers choose different methods:

1. Use eval in IE6 and 7
2. IE8 uses native JSON objects
3. Firefox2, 3 use new Function
4. Safari4 uses eval
5. The performance of eval and new functions in other browsers is basically the same

1. Application of JSON in PHP
2. Beyond XML and JSON: YAML, a new choice for Java developers
3. Lightweight Data Exchange Format JSON