비동기 JavaScript에서 마이크로태스크 대기열과 콜백 대기열의 차이점은 무엇입니까?-JS 튜토리얼-php.cn

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

PHPz

풀어 주다： 2023-08-24 09:33:02

앞으로

540명이 탐색했습니다.

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

비동기 JavaScript에는 작업을 예약하는 두 가지 방법, 즉 Microtask Queue과 Callback 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는 별도의 이벤트 루프에서 처리됩니다. 즉, 메인 스레드가 차단되면 마이크로태스크 대기열은 여전히
마이크로태스크 대기열은 현재 작업이 완료된 후에 처리됩니다. 즉, 현재 작업에 의존하는 모든 코드가 마이크로태스크 대기열에 추가되어 처리될 수 있습니다. 현재 작업이 완료된 후 즉시 실행됩니다.
마이크로태스크 대기열은 콜백 대기열보다 우선순위가 높습니다. 즉, 두 대기열이 동시에 실행되도록 예약된 경우 마이크로태스크 대기열이 먼저 실행됩니다.