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

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

Linda Hamilton

リリース： 2024-10-27 08:37:02

オリジナル

342 人が閲覧しました

How do you determine and troubleshoot JavaScript stack size limitations in different browsers?

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