javascript 의 비동기 macrotask 와 microtask 소개

javascript 의 비동기 macrotask 와 microtask 소개
macrotask 가 뭐 예요?microtask 가 뭐 예요?macrotask 가 뭔 지 이해 하 세 요?microtask 가 무엇 인지 알 기 전에 자바 script 의 이벤트 순환 체 제 를 살 펴 보 겠 습 니 다. 다음 코드 와 같이 먼저 보 겠 습 니 다.

console.log(1);
setTimeout(function(){
  console.log(2);
}, 0);
console.log(3);

위 에서 운행 한 결 과 는 1, 3, 2 가 분명 하 다.위의 코드 setTimeout 의 지연 시간 은 0 입 니 다. setTimeout 을 비동기 함수 로 호출 하 는 것 으로 이해 할 수 있 습 니 다. 이것 은 javascript 이 단일 스 레 드 이기 때 문 입 니 다. 메 인 스 레 드 는 실행 스 택 과 작업 대기 열 을 가지 고 있 습 니 다. 메 인 스 레 드 는 순서대로 코드 를 실행 합 니 다. 비동기 함 수 를 만 났 을 때 먼저 이 함 수 를 스 택 에 넣 고 모든 메 인 스 레 드 함수 가 실 행 된 후에 비동기 함 수 를 스 택 에서 꺼 냅 니 다.모든 비동기 함수 가 실 행 될 때 까지 기다 리 면 됩 니 다.
Macrotasks 와 Microtasks
Macrotasks 와 Microtasks 는 모두 상기 비동기 작업 중의 하나 에 속 합 니 다. 그들 은 각각 다음 과 같은 API 가 있 습 니 다. macrotasks: setTimeout, setInterval, setImmediate, I / O, UI renderingmicrotasks: process. nextTick, Promise, Mutation Observer
setTimeout 의 macrotask 는 Promise 의 microtask 와 어떤 차이 가 있 는 지 먼저 다음 과 같은 코드 를 보 겠 습 니 다.

console.log(1);
setTimeout(function(){
  console.log(2);
}, 0);
Promise.resolve().then(function(){
  console.log(3);
}).then(function(){
  console.log(4);
});

위의 코드 는 1, 3, 4, 2 를 출력 합 니 다.
위의 코드 를 보면 Promise 의 함수 코드 의 비동기 작업 은 setTimeout 의 지연 시간 이 0 인 작업 보다 먼저 실 행 됩 니 다.이 유 는 작업 대기 열 이 macrotasks 와 microtasks 로 나 뉘 어 있 기 때 문 입 니 다. promise 의 then 방법 함 수 는 microtasks 대기 열 에 추 가 됩 니 다. setTimeout 함 수 는 macrotasks 작업 대기 열 에 추 가 됩 니 다. 모든 이벤트 순환 에서 macrotask 는 하나의 실행 만 추출 하고 microtask 는 microsoft 대기 열 이 비어 있 을 때 까지 계속 추출 합 니 다.즉, 어떤 microtask 작업 이 실행 에 들 어가 면 메 인 스 레 드 작업 이 완료 되면 이 대기 열 작업 의 다음 작업 을 반복 해서 실행 합 니 다. 이 작업 대기 열 이 마지막 작업 까지 실 행 됩 니 다.이벤트 순환 은 매번 하나의 macrotask 만 스 택 에 들 어 갑 니 다. 주 스 레 드 는 이 작업 을 수행 한 후에 microtasks 대기 열 을 검사 하고 안의 모든 작업 을 완성 한 후에 macrotask 의 작업 을 수행 합 니 다.
Microtask 의 응용: 왜 microtask 를 사용 합 니까?HTML Standrad 에 따 르 면 모든 task 가 실 행 된 후에 UI 가 다시 렌 더 링 됩 니 다. 그러면 microtask 에서 데이터 업 데 이 트 를 완성 하기 때문에 현재 task 가 끝나 면 최신 UI 를 얻 을 수 있 습 니 다.반대로: 데이터 업 데 이 트 를 위해 task 를 새로 만 들 면 렌 더 링 은 두 번 실 행 됩 니 다.다음 과 같이 대답 할 줄 아 느 냐 (https://www.zhihu.com/question/55364497/answer/144215284）