JavaScript parses the performance comparison analysis code of the Johnson string

May 08, 2021 JSON

1. First, the test method

2. Second, the test object

3. Third, the test environment

4. Fourth, test results

5. V. Conclusions

6. Attached: All codes

When we use AJAX for server-side and client-side interactions, it's common practice for the server side to return a JSON string and then parse it into JavaScript objects on the client side.

The methods used for parsing are generally eval or new function, while IE8 and Firefox 3.1 now have native JSON objects built in (which are said to provide some performance improvement). S o how do we choose from these three methods when we actually use them (because of performance issues, without considering parsing with javascript implementations)? W hich way is the best way to perform against a large number of browsers?

First, the test method

1, first specify the number of tests and JSON string

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, cycle resolution and record the time

Eval

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

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

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!" ); 
}

Second, the test object

Choose the current mainstream browser (regardless of the Maxthon shell), including IE6, 7, 8, Firefox 2, 3, 3.1, Chrome, Opera and Safari 3, 4.

Third, the test environment

The T9300 CPU plus 4G RAM plus Windows 2003, where IE8 uses Vista's environment, and IE7 is on another work machine (2G CPU plus 2G RAM plus Windows 2003), the resulting error should be acceptable considering that it is primarily testing the performance of the browser client.

Fourth, test results

JavaScript parses the performance comparison analysis code of the Johnson string

The smaller the value, the better
The green background in the current column represents the best performance and the red performance is the worst:

1, Firefox 2, 3 all bottom, IE6 performance is better than IE7 (may be related to machine insanity), Chrome and Safari 4 performance far more than other browsers.
2, different browsers under the eval and new Function performance is not consistent, in general eval is better, but Firefox under the new Function performance is twice as good as eval, in order to better compatible with each browser, we put the resolution of JSON separately packaged into a single object to deal with:

wrapper

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

Results after joining Wrapper:

JavaScript parses the performance comparison analysis code of the Johnson string

Because of the overhead involved in calling objects, encapsulating JSON objects is slower than calling them separately, but it guarantees that the most appropriate method is used across browsers.

V. Conclusions

When parsing the Johnson string, different browsers choose different methods:

IE6, 7 use eval
IE8 uses native JSON objects
Firefox 2, 3 use new Function
Safari4 uses eval
The performance of eval and new Function under other browsers is basically the same

Update：

2009.03.23: Block all Firefox Add-Ons for further testing
Since Known's code running under Firefox was completely inconsistent, suspected to be caused by Firefox's plug-ins, all plug-ins were banned (later shown to be almost caused by Firebug) and retested under Firefox 2 and 3, with the following results:

JavaScript parses the performance comparison analysis code of the Johnson string

This suggests that Firefox's own performance is not as low as we tested earlier, and that it is still good after removing plug-ins. B ut without plug-in support like Firebug, Firefox is much less attractive to us.

2009.03.31: A new jason string is used each time in the loop
According to Oliver's description, he speculated that Safari4 and Chrome cached the results of eval, resulting in their "virtual" high test scores, which proved his guess:

JavaScript parses the performance comparison analysis code of the Johnson string

From this result we can see that Opera performs best, with Ie8 second.
The code that is mainly modified:

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

Attached: All codes

The code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Parse JsonString</title> 
</head> 
<body> 
<div id="consoleRegion"></div> 
<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>

JavaScript parses the performance comparison analysis code of the Johnson string

Table of contents

First, the test method

Eval

new Function

native

Second, the test object

Third, the test environment

Fourth, test results

wrapper

V. Conclusions

Attached: All codes

Cookie Consent