자 바스 크 립 트 매크로 작업 과 마이크로 작업 수행 순서

1.JavaScript 단일 스 레 드
JavaScript 는 단일 스 레 드 로 같은 시간 에 한 가지 일 만 할 수 있 고 앞의 일 을 다 해 야 뒤의 일 을 수행 할 수 있다 는 것 을 말한다.시간 이 걸 리 는 작업 을 만 났 을 때 뒤의 코드 를 실행 할 수 없습니다.
그 전에 동기 화 와 비동기 화 를 알 아야 돼 요. 
1.동기 화 작업(synchronous) 

    console.log(123);
    console.log(456);
    for (let i = 1; i <= 5; i++) {
      console.log(i);
    }

말 그대로 순 서 를 따 르 는 거 예요. 
2.비동기 작업(asynchronous)

    setTimeout(() => {
      console.log('   ');
    }, 0)
    console.log('   ');

일반적인 실행 순서에 따라 타 이 머 는 위 에 있 습 니 다.  타 이 머 를 출력 해서 오 트 만 을 출력 해 야 합 니 다.  

마지막 으로 받 은 결 과 는 오 트 만 이 타 이 머 를 출력 하고 있 습 니 다.  그 이 유 는 setTimeout 이 비동기 미 션 이기 때 문 입 니 다.  
지식 포 인 트 를 보충 하 다.  setTimeout 의 타 이 머 는 몇 밀리초 지연 되 더 라 도 비동기 입 니 다.  브 라 우 저 마다 시간 이 다 릅 니 다.브 라 우 저 마다 차이 가 있 지만 0 최소 4 밀리초 로 정의 되 었 습 니 다.
2.퀘 스 트 대기 열(task queue)
위의 코드 를 통 해 setTimeout 이 비동기 임 을 알 수 있 습 니 다.   저희 가 집행 순서 우선 순 위 를 알 아 봤 어 요.  동기 코드>비동기 코드      그 러 니까 미 션 대기 열 에 서 는 두 가지 유형 으로 나 뉘 어 져 있 습 니 다.1.동기 화 미 션 입 니 다.   2.비동기 임무 
1.실행 스 택
(1)모든 동기 화 작업 은 주 스 레 드 에서 실 행 됩 니 다.실행 스 택(execution context stack)을 만 듭 니 다.
(2)메 인 라인 외 에 도'작업 대기 열'(task quue)이 존재 합 니 다.비동기 작업 이 실행 결과 가 나 오 면'작업 대기 열'에 이 벤트 를 배치 합 니 다.
(3)'실행 스 택'의 모든 동기 화 작업 이 완료 되면 시스템 은'작업 대기 열'을 읽 고 안에 어떤 사건 이 있 는 지 봅 니 다.대응 하 는 비동기 작업 은 대기 상 태 를 끝내 고 실행 창고 에 들 어가 서 실행 을 시작 합 니 다.
(4)메 인 스 레 드 는 위의 세 번 째 단 계 를 계속 반복 하여 이벤트 순환(Event Loop)이 라 고 합 니 다.
간단히 배 를 들다    

똑 같이 밥 먹 으 러 가요.  하지만 p2 는 나 가 는 시간 과정 을 줄 였 다.
간단하게 이해 한 후에 우 리 는 비동기 임무 중의 매크로 임 무 를 깊이 이해 합 니 다(macrotask ）마이크로 태 스 크 ）
개인 이해:매크로 임무 와 마이크로 임 무 는 두 가지 비동기 형태 로 이해 할 수 있다.  비동기 에는 두 아이의 매크로 임무 와 마이크로 임무 가 있다.
매크로 작업 의 방법:1.script(외부 동기 화 코드 로 이해 할 수 있 으 며 입구 로 사용 할 수 있 습 니 다)   2. setTimeout/setInterval
마이크로 미 션 방법:1.Promise 2.nextTick
그들의 실행 순 서 는 마이크로 작업 이 출력 매크로 작업 에 먼저 출력 되 는 것 이다.
증거 코드

    setTimeout(() => {
      console.log('   ');
    }, 0)
    new Promise((resolve) => {
      console.log('    ')  
      resolve('    ')
    }).then((res) => {
      console.log(res);   
    })
    console.log('   ');

오 뉴 프로 미스 는 구조 함 수 를 만 드 는 과정 이 동기 화 되 었 고,then 방법 은 비동기 화 되 었 음 을 주의 하 십시오.  그래서 코드 는 동기 화>마이크로 작업>매크로 작업 을 먼저 수행 합 니 다.
더욱 상세 하 게 그림 으로 실행 과정 을 묘사 하기 위해 서   아래 그림 이 있어 요.엄 청 나 게 공 부 했 어 요.


이 그림 들 을 좀 더 융합 시 켜 보 겠 습 니 다.

setTimeout 의 이 해 를 확장 합 니 다.
의문점 1 동기 코드 가 실행 되면 setTimeout 은 0 부터 시간 을 잽 니까?

    setTimeout(() => {
      console.log('setTimeout');
    }, 1000);
    console.log('   ');
    for (let i = 0; i < 1000; i++) {
      console.log('');
    }

이때 밝 혀 야 할 것 은 제 가 for 순환 할 때 setTimeout 도 시간 을 잽 니 다.  그 는 타이머 모듈 을 열 것 이다.그래서 메 인 스 레 드 를 실행 할 때 타이머 모듈 이 이미 실행 되 기 시 작 했 기 때문에 1 초 를 기다 리 지 않 고 실행 할 것 이다.
(동기 실행 이 끝났다 고 생각 하지 말고 시간 을 재 세 요)      
의문점 2:두 타이머 위의 타 이 머 는 아래 타 이 머 를 먼저 실행 합 니까?
테스트 는 우리 가 타이머 하나만 더 해서 누가 먼저 실행 하 는 지 보면 돼.

    setTimeout(() => {
      console.log('setTimeout1');
    }, 2000);
    setTimeout(() => {
      console.log('setTimeout2');
    }, 1000);

그 결과 타이머 가 두 개 있 으 면 시간 이 적 으 면 메 인 스 레 드 에 우선 넣 어 실행 하 는 것 으로 나 타 났 다. 
의문점 3:변 수 를 0 으로 정의 합 니 다.   같은 타이머 이벤트 두 개 를 설정 하면 그 는 어떤 결 과 를 출력 합 니까?면접 문제

    i = 0
    setTimeout(() => {
      console.log(++i);  //1
    }, 1000);
    setTimeout(() => {
      console.log(++i);  //2 
    }, 1000);

지금 보면 타이머 매크로 작업 이 같이 수행 되 는 게 아니 라 는 걸 알 아야 돼 요.    순서대로!!
매크로 퀘 스 트,마이크로 퀘 스 트 수행 순서 면접 문제

    console.log('1');
 
    setTimeout(function () {
      console.log('2');
      process.nextTick(function () {
        console.log('3');
      })
      new Promise(function (resolve) {
        console.log('4');
        resolve();
      }).then(function () {
        console.log('5')
      })
    })
    process.nextTick(function () {
      console.log('6');
    })
    new Promise(function (resolve) {
      console.log('7');
      resolve();
    }).then(function () {
      console.log('8')
    })
 
    setTimeout(function () {
      console.log('9');
      process.nextTick(function () {
        console.log('10');
      })
      new Promise(function (resolve) {
        console.log('11');
        resolve();
      }).then(function () {
        console.log('12')
      })
    })

답:
첫 번 째 실행 외부 동기 화 코드:1     7   
2 라운드 마이크로 퀘 스 트 수행:6    8    
제 3 라운드 매크로 퀘 스 트  첫 번 째 setTimeout:동기 화  2  4   미 션   5   두 번 째 setTimeout:동기 화  9   11    작은 임무  10   12 
전체 답안:  1、7 、6、8、2、4、3、5、9、11、10、12
자 바스 크 립 트 매크로 퀘 스 트 와 마이크로 퀘 스 트 수행 순서 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.자 바스 크 립 트 매크로 퀘 스 트 와 마이크로 퀘 스 트 수행 순서 에 관 한 더 많은 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!