>웹 프론트엔드 >JS 튜토리얼 >다양한 브라우저의 JavaScript 스택 크기 제한을 어떻게 확인하고 해결합니까?

다양한 브라우저의 JavaScript 스택 크기 제한을 어떻게 확인하고 해결합니까?

Linda Hamilton
Linda Hamilton원래의
2024-10-27 08:37:02428검색

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은 약 3,200개의 함수 호출에서 스택 오버플로를 발생시키는 반면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.