コード running_html/css_WEB-ITnose に対する try catch のパフォーマンスへの影響

原因

JavaScript コードで例外をキャッチするには、一般的に try catch が使用されますが、try catch の使用はコードのパフォーマンスに影響しますか?答えは「はい」ですが、その数は不明です。

フロントエンドのオンライン スクリプト エラーをキャプチャする方法:

window .

try {

//コード

} catch ( e ) {

JSTracker . Push ( e ) ;

throw e ; // に再度エラーをスローすることをお勧めします。テストの失敗を回避する 異常を発見する

}

実験方法を設計する

単純な設計計画は比較実験です。

空白グループ 1: [try catch なしでデータを 1,000 万回モジュロするのに時間がかかります]

< DOCTYPE html > ;

< 1 トライキャッチなしでは時間がかかります

! function ( ) {

//try catch なしでは時間がかかります

var t = new Date ()

//コードの開始時は時間がかかります

for ( var i = 0 ; i < 100000000 ; i ++ ) {

var p = i % 2 ;

}

//End時間のかかるコード

document . write ( new Date ( ) – t ) ;

< / ヘッド >

<参照グループ 2: [時間のかかるコードを try で囲み、

>

2 時間のかかるインラインコードの状況

! function ( ) {

//try

var t = new Date () ;

// 時間のかかるコードが始まります

for ( var i = 0 ; i <100000000 ; i ++ ) {

var p = i % 2 ; >}

//時間のかかるコードの終わり

throw new Error ( ) ;

} catch ( e ) {

}

ドキュメント . write ( new Date ( ) – t ) ;

< >

< body >

< / html >

コードは、時間のかかる外部コードで囲まれています。

<

< try

の時間のかかる状況

function run () {

//時間のかかるコードの開始

for ( var i = 0 ; i

var p = i % 2;

}

//時間のかかるコードの終わり

}

//時間のかかるインラインコードtry Case

var t = new Date ( ) ;

try {

run ( ) ;

throw new Error ( ) ; 🎜 > } catch ( e ) {

}

ドキュメント . write ( new Date ( ) – t ) ;

< ; /script>

< 本文

< ;

参照グループ 4: [時間のかかるコードを catch で囲み、コードをインライン化します]

<

4 時間のかかるインラインコード> <script></p> <p> ! function ( ) { </p> <p>//catch のインラインコードの時間がかかる状況 </p> <p> var t = new Date ( ) ; > </p> try { <p> </p> throw new Error ( ) ; <p> </p> } catch ( e ) { <p> </p>//時間のかかるコードは <p> </p> で始まります( var i = 0 ; i var p = i % 2 ; <p> </p>}<p> </p>//時間のかかるコードの終わり<p> </p>}<p> </p> ドキュメント . write ( new Date ( ) – t ) ; <p> </p></script>

< 本文

参照グループ 5: [時間のかかるコードをキャッチで囲み、接続する]

< ! ;

のインラインコードの時間のかかる状況>

! 関数 ( ) {

function run () {

//時間のかかるコードの開始

for ( var i = 0 ; i <100000000 ; i ++ ) {

var p = i % 2;

}

//時間のかかるコードの終わり

}

//インラインコードの時間のかかる状況in catch

var t = new Date () ;

try {

throw new Error () ;

} catch ( e ) {

実行 ( ) ;

}

ドキュメント . write (

) ;

;/ スクリプト>

< ボディ >

< ;

実行結果 (例として Chrome のみが選択されています)

概要を示します

–	不使用 try-catch	try 中耗时，内联代码	try 中耗时，外联代码	catch 中耗时，内联代码	catch 中耗时，外联代码
Chrome51	98.2	1026.9	107.7	1028.5	105.9

try catch を使用するかどうかtry のコードまたは catch のコードのパフォーマンス消費は同じです。

• 注意が必要なパフォーマンスの消費は、try catch に直接あまり多くのコードを入れないことです (変数を宣言しすぎないこと)。実行するすべてのコードを別のコードに入れるのが最善です。関数内ではこの関数を呼び出すことで実行されます。

• 2 番目の点については、ECMA の try catch についての説明を確認できます。コードが try catch に入ると、JS エンジンは現在のレキシカル環境をコピーします。すべての変数の現在のスコープ。

推奨されます

try catch を使用する場合は、try catch を比較的クリーンなスコープに配置するように努め、できれば try catch ステートメントに十分な少数の変数があることを確認してください。関数を通じてメソッドを呼び出してキャッチを試みます。

テストでの現象の説明

テスト中にまだ質問が見つかりました。次の 2 つのコードは Chrome 44 で実行されます。空の Try を追加すると、結果は大きく異なります。 catch 平均: 850 ミリ秒、プラス前: 140 ミリ秒。

! function ( ) {

// try catch を使用しないと時間がかかります

var t = new Date ( ) ; /時間のかかるコードの開始

for ( var i = 0 ; i

var p = i % 2 ;

}

//時間のかかるコードの終わり

document . write ( new Date ( ) – t ) ;

try {

} catch ( e ) {

}

} ( ) ;

! function ( ) {

//try catch を使用しないと時間がかかります

var t = new Date () ;

//時間のかかるコードが始まります

for ( var i = 0 ; i

var p = i % 2;

}

//時間のかかるコードの終わり

document . write ( new Date ( ) – t ) ;

} ( ) ;

実は、その理由は非常に簡単です

これにコードを変更するだけで、時間がかかります:

! function () {

! function () {

// try catch を使用しないと時間がかかります

var t = new Date ( ) ;

// 時間のかかるコードの開始

for ( var i = 0 ; i

var p = i % 2 ;

}

//時間のかかるコードの終わり

ドキュメント . write ( new Date ( ) – t ) ; ;

try {

} catch ( e ) {

}

} ( ) ;