>  기사  >  웹 프론트엔드  >  비동기 JavaScript에서 마이크로태스크 대기열과 콜백 대기열의 차이점은 무엇입니까?

비동기 JavaScript에서 마이크로태스크 대기열과 콜백 대기열의 차이점은 무엇입니까?

PHPz
PHPz앞으로
2023-08-24 09:33:02557검색

异步 JavaScript 中微任务队列和回调队列有什么区别?

비동기 JavaScript에는 작업을 예약하는 두 가지 방법, 즉 Microtask QueueCallback Queue이 있습니다. JavaScript 엔진은 이 두 대기열을 다르게 처리합니다.

Microtask Queue

Microtask Queue는 현재 작업 이후에 실행되는 작업 대기열입니다. 마이크로태스크 대기열은 콜백 대기열의 다음 작업으로 이동하기 전에 JavaScript 엔진에 의해 처리됩니다.

Example

다음은 마이크로태스크 대기열 작동 방식의 예입니다. -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      console.log(&#39;start&#39;);
 
      setTimeout(function() {
         console.log(&#39;setTimeout&#39;);
      }, 0);
 
      Promise.resolve().then(function() {
         console.log(&#39;promise resolve&#39;);
      });
 
      console.log(&#39;end&#39;);
   </script>
</body>
</html>

위의 예에서는 "setTimeout" 콜백이 콜백 대기열에 추가되었습니다. "Promise.resolve"가 마이크로태스크 대기열에 추가됩니다. JavaScript 엔진은 콜백 대기열에 들어가기 전에 먼저 마이크로태스크 대기열의 모든 작업을 실행합니다.

그래서 위 코드의 출력은 (in console)입니다. -

start
end
promise resolve
setTimeout

Callback Queue

Callback Queue는 현재 작업 이후에 실행되는 작업의 대기열입니다. 콜백 대기열은 마이크로태스크 대기열의 모든 작업이 실행된 후 JavaScript 엔진에 의해 처리됩니다.

Example

다음은 콜백 대기열 작동 방식의 예입니다.

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      console.log(&#39;start&#39;);
 
      setTimeout(function() {
         console.log(&#39;setTimeout&#39;);
      }, 0);
 
      console.log(&#39;end&#39;);
   </script>
</body>
</html>

위의 예에서는 'setTimeout' 콜백이 콜백 대기열에 추가됩니다. JavaScript 엔진은 현재 작업의 모든 코드를 실행한 후 "setTimeout" 콜백을 실행합니다.

위 코드의 출력은 (콘솔에서) -

start
end
setTimeout

Microtask Queue와 Callback Queue

Microtask Queue와 CallbackQueue의 차이점은 다음과 같습니다. -

  • Microtask 대기열은 콜백 대기열의 다음 작업으로 이동하기 전에 JavaScript 엔진에 의해 처리됩니다. 콜백 마이크로태스크 대기열의 모든 작업이 실행된 후 대기열은 JavaScript 엔진에 의해 처리됩니다.

  • Microtask현재 작업이 완료된 후 대기열 처리. 콜백큐는 마이크로태스크 큐가 비워진 후에 처리됩니다.

  • Microtasks 대기열은 별도의 이벤트 루프에서 처리됩니다. 콜백큐는 동일한 이벤트 루프에서 처리됩니다.

  • Microtask Queue의 장점

    콜백 대기열에 비해 Microtask Queue의 몇 가지 장점은 다음과 같습니다.

    • Microtask Queue는 별도의 이벤트 루프에서 처리됩니다. 즉, 메인 스레드가 차단되면 마이크로태스크 대기열은 여전히 ​​

    • 마이크로태스크 대기열은 현재 작업이 완료된 후에 처리됩니다. 즉, 현재 작업에 의존하는 모든 코드가 마이크로태스크 대기열에 추가되어 처리될 수 있습니다. 현재 작업이 완료된 후 즉시 실행됩니다.

    • 마이크로태스크 대기열은 콜백 대기열보다 우선순위가 높습니다. 즉, 두 대기열이 동시에 실행되도록 예약된 경우 마이크로태스크 대기열이 먼저 실행됩니다.

    콜백 대기열의 장점

    마이크로태스크 대기열에 비해 콜백 대기열의 장점 중 하나는 콜백 대기열이 기본 스레드와 동일한 이벤트 루프에서 처리된다는 것입니다. 즉, 메인 스레드가 차단되면 콜백 대기열이 처리되지 않습니다.

    결론

    이 튜토리얼에서는 비동기 JavaScript에서 마이크로태스크 대기열과 콜백 대기열의 차이점을 살펴보았습니다. 우리는 또한 각 코호트의 장점을 살펴보았습니다.

    위 내용은 비동기 JavaScript에서 마이크로태스크 대기열과 콜백 대기열의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명:
    이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제