JavaScript queueMicrotask 소개

소개

대기열마이크로태스크 동기 코드를 비동기로 변환하는 데 사용할 수 있는 새로운 브라우저 API입니다.

queueMicrotask(() => {
    console.log('hey i am executed asychronously by queueMicrotask');
});

setTimeout을 사용하여 수행한 작업과 유사합니다.

setTimeout(() => {
    console.log('hey i am executed asychronously by setTimeout');
}, 0);

queueMicrotask의 용도는 이미 setTimeout이 있는 경우 ?

큐마이크로태스크 함수(태스크)를 큐에 추가하고 현재 태스크가 작업을 완료하고 실행 컨텍스트의 제어가 브라우저로 반환되기 전에 실행 대기 중인 다른 코드가 없을 때 각 함수가 하나씩(FIFO) 실행됩니다. 이벤트 루프.

기본적으로 queueMicrotask의 작업 이벤트 루프에 실행을 전달하기 전에 현재 호출 스택이 비어 있는 직후에 실행됩니다.

setTimeout의 경우 , 각 작업은 이벤트 루프에 제어가 주어진 후 이벤트 큐에서 실행됩니다.

따라서 setTimeout을 실행하면 먼저 queueMicrotask , 어떤 것이 먼저 호출될까요? 아래 코드를 실행하고 직접 확인하십시오.

setTimeout(() => {
    console.log('hey i am executed asychronously by setTimeout');
},0);

queueMicrotask(() => {
    console.log('hey i am executed asychronously by queueMicrotask');
}); 

Node.js는 "process.nextTick"과 동일한 작업을 수행합니다.

사용 시기 그것

queueMicrotask, 를 언제 사용해야 하는지에 대한 규칙은 없습니다. 그러나 현재 실행을 중지하지 않고 코드를 실행하는 데 영리하게 사용할 수 있습니다.

예를 들어 값 목록을 유지 관리하는 배열이 있다고 가정해 보겠습니다. 모든 값이 삽입된 후 값을 더 빠르게 검색할 수 있도록 배열을 정렬합니다.

var arr=[];

function add(value){
  arr.push(value);
  arr.sort();
}

그러나 요소 검색은 누군가가 검색 입력 상자를 사용할 때마다 수행됩니다. 즉, 제어가 이벤트 루프로 전달된 후에 이벤트 핸들러가 호출되므로 데이터를 정렬하면 다른 중요한 동기 코드의 실행이 차단됩니다.

queueMicrotask를 사용하는 방법은 다음과 같습니다. 코드 개선:

var arr = [];

function add(value) {
  arr.push(value);
  queueMicrotask(() => {
    arr.sort();
  })
}

참조

• https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask