さまざまなブラウザーでの JavaScript スタック サイズ制限をどのように判断してトラブルシューティングしますか?

JavaScript スタック サイズ制限のデバッグ

バックグラウンド

クライアント側の JavaScript スタック オーバーフローは、特に Internet Explorer (IE) で発生する可能性があります。他のブラウザと比べてスタック サイズが限られています。この問題は、多数の関数呼び出しを行うサードパーティ ライブラリを使用するときによく発生します。

スタック サイズ制限のテスト

さまざまなブラウザのスタック サイズ制限を確認するために、次の HTML テストが開発されました。

<code class="html">


  <title>Stack Size Limit Test</title>


  <script type="text/javascript">
    function doSomething() {
      var i = 3200;
      doSomethingElse(i);
    }

    function doSomethingElse(i) {
      if (i == 0) return -1;
      doSomethingElse(i-1);
    }

    doSomething();
  </script>

</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 サイトの他の関連記事を参照してください。