解析時に使用されるメソッドは一般的に eval または new function であり、現在 IE8 と Firefox3.1 にはネイティブ JSON オブジェクトが組み込まれています (一定のパフォーマンス向上があると言われています)。では、実際に使用する場合、これら 3 つの方法 (パフォーマンスの問題により、JavaScript で実装された解析は考慮されません) からどのように選択すればよいでしょうか?多数のブラウザがある中で、どの方法が最もパフォーマンスが高いでしょうか?
1. テスト方法
1. まずテストの数と JSON 文字列を指定します
var count = 10000, o = null, i = 0, jsonString = '{"value":{ "アイテム": [ {"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. ループ解析と時間の記録
eval
var beginTime = new Date(); ( i = 0; i < count; i ) {
o = eval( "(" jsonString ")" );
}
Console.output( "eval:" ( new Date() - beginTime ) );
新しい関数
var beginTime = new Date();
for ( i = 0; i < count; i ) {
o = new Function( "return " jsonString )();
}
Console.output( "new Function:" ( new Date() - beginTime ) );
ネイティブ
if ( typeof JSON !== "unknown" ) {
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!" );
IE6、7、8、Firefox2、3、3.1、Chrome、Opera、Safari3、4 を含む、現在の主流ブラウザ (Maxthon やその他のシェルは考慮されません) を選択します。
3. テスト環境
T9300 CPU 4G RAM Windows2003、IE8 は Vista 環境を使用、IE7 は別の動作マシン (2G CPU 2G RAM Windows2003)主な目的はブラウザ クライアントのパフォーマンスをテストすることなので、結果のエラーは許容できるはずです。
4. テスト結果
*値が小さいほど良好です
* の背景は緑色です現在の列は最高のパフォーマンスを意味し、赤色は最低のパフォーマンスを示します 1. Firefox2 と 3 はすべて最下位、IE6 は IE7 よりも優れたパフォーマンスを示します (マシンの不一致に関連している可能性があります)、Chrome と Safari4 は他のものよりもはるかに優れたパフォーマンスを示しますブラウザ。
2. eval と new Function のパフォーマンスはブラウザーによって異なります。一般に、eval の方が優れていますが、さまざまなブラウザーとの互換性を高めるために、Firefox での new Function のパフォーマンスは 2 倍になります。ブラウザでは、JSON の解析を処理用のオブジェクトにカプセル化します。
ラッパー
コードをコピー
コードは次のとおりです。 var __json = null; if ( typeof JSON !== "unknown" ) {
__json = JSON;
}
var ブラウザ = ブラウザ; >var JSON = {
parse: function( text ) {
if ( __json !== null ) {
return __json.parse( text );
if ( browser.gecko ) {
return new Function( "return " text )();
}
return eval( "(" text ")" )
}
}; new Date ();
for ( i = 0; i < count; i ) {
o = JSON.parse( jsonString ); }
Console.output( "wrapper:" ( new Date( ) - beginTime ) );
Wrapper を追加した後の結果:
オブジェクトの呼び出しに伴うオーバーヘッドのため、カプセル化された JSON オブジェクトは個別に呼び出すよりも遅くなりますが、次のことを保証できます。すべてのブラウザで使用されます。お使いのデバイスに最適な方法を使用してください。
5. 結論
Json 文字列を解析する場合、ブラウザごとに異なるメソッドが選択されます。
IE6 と 7 は eval を使用します
IE8 はネイティブ JSON オブジェクトを使用します
Firefox2 と 3 は新しい関数を使用します
Safari4 は eval を使用します
他のブラウザでの eval と新しい関数のパフォーマンスは基本的に同じです
異なる意見がある場合は、コメントしてください:)
更新:
2009.03.23: すべての Firefox アドオンをブロックし、
Firefox でコードを実行すると既知の結果が完全に矛盾するため、Firefox プラグインが原因であると考えられます。そこで、すべてのプラグインを無効にした後 (後にほぼ Firebug が原因であることが判明しました)、Firefox 2 と 3 で再テストしました。結果は次のとおりです。
これは、Firefox 自体のパフォーマンスが以前ほど低くなく、プラグインを削除した後も依然として非常に良好であることを示しています。しかし、Firebug などのプラグインのサポートがなければ、Firefox の魅力は大幅に減少してしまいます。
2009.03.31: ループ内で毎回新しい json 文字列を使用する
オリバーの説明によると、Safari4 と Chrome が eval の結果をキャッシュしたため、テスト スコアが
この結果から、Opera が最高のパフォーマンスを示し、次に Ie8 が続くことがわかります。
主に変更されたコード:
//eval 2: var beginTime = new Date();
for ( i = 0; i < count; i ) {
o = eval("(" '{"value": {" アイテム": [{"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":{"アイテム" : [{"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 ) );
//ネイティブ
if ( typeof JSON !== "未定義" ) {
beginTime = new Date();
for ( i = 0; i < count; i ) {
o = JSON. parse( '{"値":{"項目": [{"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; == "未定義" ) {
__json = JSON;
}
var 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('{"値":{"項目": [{"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 ) );
添付: すべてのコード
コードをコピー
* の背景は緑色です現在の列は最高のパフォーマンスを意味し、赤色は最低のパフォーマンスを示します 1. Firefox2 と 3 はすべて最下位、IE6 は IE7 よりも優れたパフォーマンスを示します (マシンの不一致に関連している可能性があります)、Chrome と Safari4 は他のものよりもはるかに優れたパフォーマンスを示しますブラウザ。 
