如何確定不同瀏覽器中的 JavaScript 堆疊大小限制並對其進行故障排除？-js教程-PHP中文網

如何確定不同瀏覽器中的 JavaScript 堆疊大小限制並對其進行故障排除？

Linda Hamilton

發布： 2024-10-27 08:37:02

原創

350 人瀏覽過

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 開發人員工具）提供了在發生錯誤時顯示呼叫堆疊的方法。

更簡單的堆疊大小限制測試

使用的簡化測試遞歸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中文網其他相關文章！