ホームページ > 記事 > ウェブフロントエンド > さまざまなブラウザーでの JavaScript スタック サイズ制限をどのように判断してトラブルシューティングしますか?
さまざまなブラウザーでの JavaScript スタック サイズ制限をどのように判断してトラブルシューティングしますか?
- Linda Hamiltonオリジナル
- 2024-10-27 08:37:02343ブラウズ
JavaScript スタック サイズ制限のデバッグ
バックグラウンド
クライアント側の JavaScript スタック オーバーフローは、特に Internet Explorer (IE) で発生する可能性があります。他のブラウザと比べてスタック サイズが限られています。この問題は、多数の関数呼び出しを行うサードパーティ ライブラリを使用するときによく発生します。
スタック サイズ制限のテスト
さまざまなブラウザのスタック サイズ制限を確認するために、次の HTML テストが開発されました。
<code class="html"><!DOCTYPE html>
<html>
<head>
<title>Stack Size Limit Test</title>
</head>
<body>
<script type="text/javascript">
function doSomething() {
var i = 3200;
doSomethingElse(i);
}
function doSomethingElse(i) {
if (i == 0) return -1;
doSomethingElse(i-1);
}
doSomething();
</script>
</body>
</html></code>
テストにより、IE8 は約 3200 回の関数呼び出しでスタック オーバーフローが発生する一方、Firefox と Chrome はより深い再帰をサポートしていることが明らかになりました。
犯人の特定
特定するにはIE でスタック オーバーフローを引き起こす特定の JavaScript 関数については、次のことが便利です。
- スタック オーバーフロー例外を実行時に発生させた関数に結び付ける。
- スタックを取得するエラー発生時のスタック内の関数チェーンをトレースします。
JavaScript スタック トレース
JavaScript は、スタック トレース機能をネイティブに提供しません。ただし、ブラウザ開発者ツール (Chrome DevTools、Firefox Developer Tools など) には、エラー時のコール スタックを表示する方法が用意されています。
より単純なスタック サイズ制限テスト
を使用した簡素化されたテスト再帰的 inc() 関数を使用して、特定のブラウザの最大スタック サイズを決定することもできます。
<code class="js">var i = 0;
function inc() {
i++;
inc();
}
try {
inc();
}
catch(e) {
// The StackOverflow sandbox adds one frame that is not being counted by this code
// Incrementing once manually
i++;
console.log('Maximum stack size is', i, 'in your current browser');
}</code>
このテストでは、スタック オーバーフローが発生した後に最大スタック サイズがコンソールに出力されます。
以上がさまざまなブラウザーでの JavaScript スタック サイズ制限をどのように判断してトラブルシューティングしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。