Performance comparison analysis code for JavaScript parsing Json string_json

The methods used during parsing are generally eval or new function, and currently IE8 and Firefox3.1 have built-in native JSON objects (it is said that there will be a certain performance improvement). So how do we choose from these three methods (due to performance issues, parsing implemented in JavaScript is not considered) when we actually use it? Faced with numerous browsers, which method has the best performance?

1. Testing method

1. First specify the number of tests and JSON string

Copy the code The code is as follows:

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. Loop analysis and record time

eval

Copy code The code is as follows:

var beginTime = new Date();
for ( i = 0; i < count; i ) {
o = eval( "(" jsonString ")" );
}
Console.output( "eval:" ( new Date() - beginTime ) );

new Function

Copy code The code is as follows:

var beginTime = new Date();
for ( i = 0; i < count; i ) {
o = new Function( "return " jsonString )();
}
Console.output( "new Function:" ( new Date() - beginTime ) );

native

Copy code The code is as follows:

if ( typeof JSON !== "undefined" ) {
var 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!" );
}

2. Test object

Choose the current mainstream browser (not considered Maxthon and other shells), including IE6, 7, 8, Firefox2, 3, 3.1, Chrome, Opera and Safari3, 4.

3. Test environment

T9300 CPU 4G RAM Windows2003, IE8 uses Vista environment, IE7 is in another working machine (2G CPU 2G RAM Windows2003 ), considering that the main purpose is to test the performance of the browser client, the error in the results should be acceptable.

4. Test results

*The smaller the value, the better

*Green background in the current column means the best performance, red has the worst performance
1. Firefox2 and 3 are all at the bottom, IE6 has better performance than IE7 (may be related to machine inconsistency), Chrome and Safari4 have far better performance than other browsers.

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

Copy code The code is as follows:

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 ")" )
}
};
var beginTime = new Date ();
for ( i = 0; i < count; i ) {
o = JSON.parse( jsonString ); }
Console.output( "wrapper:" ( new Date() - beginTime ) );

Result after adding Wrapper:

Due to the overhead involved in calling the object, the encapsulated JSON object will be slower than calling it separately, but it can ensure that it will be used in every browser Use the method most suitable for your device.


5. Conclusion

When parsing Json strings, different browsers choose different methods:

IE6 and 7 use eval
IE8 uses native JSON object
Firefox2 and 3 use new Function
Safari4 uses eval
The performance of eval and new Function in other browsers are basically the same

If you have different opinions, please comment:)

Update:

2009.03.23: Block all Firefox Add-Ons and then test
Since Known got completely inconsistent results when running the code under Firefox, it is suspected that it is caused by Firefox plug-ins. So after disabling all plug-ins (later found to be almost caused by Firebug), I re-tested it in Firefox 2 and 3. The results are as follows:

This shows that the performance of Firefox itself is not as good as It's not as low as we tested previously, and the performance is still very good after removing the plug-in. But without plug-in support such as Firebug, Firefox's appeal to us has been greatly reduced.

2009.03.31: Use a new json string each time in the loop
According to Oliver's description, he guessed that it was because Safari4 and Chrome cached the results of eval, which caused their test scores to be "falsely" high. , the test results proved his speculation:

From this result we can see that Opera has the best performance, followed by Ie8.

Mainly modified code:

Copy code The code is as follows:

//eval 2: var beginTime = new Date();
for ( i = 0; i < count; i ) {
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}' ")");
}
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 ) );

Attach: All codes

Copy code The code is as follows: