JavaScript 이벤트 순환 및 매크로 작업 마이크로 작업 원리 분석

먼저 코드 를 봅 니 다.

인쇄 순서 가 무엇 입 니까?
정 답:script start,script end,promise 1,promise 2,setTimeout
이벤트 순환(event loop),매크로 작업(macrotask),마이크로 작업(microtask)과 관련 이 있 습 니 다.
1.이벤트 순환 이벤트 루프
프로그램 에 두 개의 스 레 드 를 설정 합 니 다.하 나 는 프로그램 자체 의 운행 을 책임 지고'메 인 스 레 드'라 고 합 니 다.또 다른 메 인 스 레 드 와 다른 프로 세 스(주로 각종 I/O 작업)의 통신 을 담당 하 며'Event Loop 스 레 드'('메시지 스 레 드'로 번역 가능)라 고 불 린 다.
모든 작업 은 두 가지 로 나 눌 수 있 습 니 다.하 나 는 동기 화 작업(synchronous)이 고 다른 하 나 는 비동기 작업(asynchronous)입 니 다.
동기 화 작업 이란 메 인 스 레 드 에서 줄 을 서서 수행 하 는 작업 을 말 합 니 다.이전 작업 이 완료 되 어야 다음 작업 을 수행 할 수 있 습 니 다.
비동기 작업 이란 메 인 스 레 드 에 들 어가 지 않 고'작업 대기 열'(task quue)에 들 어 가 는 작업 을 말 합 니 다.'작업 대기 열'만 메 인 스 레 드 에 알 리 고 어떤 비동기 작업 이 실 행 될 수 있 습 니 다.이 작업 은 메 인 스 레 드 에 들 어가 서 실 행 됩 니 다.
일반적으로 비동기 임 무 는 다음 과 같은 세 가지 유형 이 있다.
1.클릭,크기 조정 등 일반적인 이벤트

2.자원 로드,예 를 들 어 load,error 등

3.타이머,setInterval,setTimeout 등 포함

이벤트 순환 의 구체 적 인 과정 은 다음 과 같다.
4.567917.동기 화 작업 은 메 인 스 레 드 에 들 어가 고 비동기 작업 은 Event Table 에 들 어가 함 수 를 등록 합 니 다

비동기 작업 이 완료 되면 Event Table 은 이 함 수 를 Event Queue 로 옮 깁 니 다

메 인 라인 의 작업 수행 완료 스 택 이 비어 있 으 면 Event Queue 에서 해당 하 는 함 수 를 읽 고 메 인 스 레 드 에 들 어가 실 행 됩 니 다

상기 과정 은 계속 반복 된다.즉,흔히 말 하 는 Event Loop(사건 순환)이다

2.매크로 퀘 스 트 와 마이크로 퀘 스 트
JavaScript 에서 작업 은 두 가지 로 나 뉘 는데 하 나 는 매크로 작업(MacroTask)이 고 하 나 는 마이크로 작업(MicroTask)이다.
2.1 매크로 작업(매크로 작업)
숙주 환경 에서 제공 하 는(브 라 우 저 와 node)
script 모든 코드,setTimeout,setInterval.
브 라 우 저 는 JS 내부 task 와 DOM 작업 을 질서 있 게 수행 할 수 있 도록 한 task 실행 이 끝 난 후 다음 task 실행 이 시작 되 기 전에 페이지 를 다시 렌 더 링 합 니 다(task->렌 더 링->task->...)
2.2microTask(마이크로 퀘 스 트)
언어 표준 제공
Promise、await
async 함수 표시 함수 에 비동기 방법 이 있 을 수 있 습 니 다.await 뒤에 표현 식 이 있 습 니 다.async 방법 이 실 행 될 때 await 를 만나면 바로 표현 식 을 실행 한 다음 await 표현 식 뒤의 코드 를 마이크로 작업 대기 열 에 넣 고 실행 스 택 을 내 보 내 동기 코드 를 먼저 실행 하 게 합 니 다.

async function foo() {
  var a = await new Promise((resolve) => {
    setTimeout(() => {
      resolve(1);
    }, 2000);
  });
  console.log(a); //  2    : 1
}
foo();

2.3 매크로 작업 과 마이크로 작업 수행 순서:

스 택 이 동기 화 작업 을 수행 한 후에 스 택 이 비어 있 는 지 확인 하고 스 택 이 비어 있 으 면 마이크로 작업 대기 열 이 비어 있 는 지 확인 합 니 다.비어 있 으 면 매크로 작업 을 수행 합 니 다.그렇지 않 으 면 모든 마이크로 작업 을 한꺼번에 수행 합 니 다

4.567917.매번 하나의 매크로 작업 이 실 행 된 후에 마이크로 작업 대기 열 이 비어 있 는 지 확인 합 니 다.비어 있 지 않 으 면 먼저 들 어 가 는 규칙 에 따라 마이크로 작업 을 모두 수행 한 후에 마이크로 작업 대기 열 을 null 로 설정 한 다음 에 매크로 작업 을 수행 합 니 다.이렇게 순환 합 니 다총화:동기 화―마이크로 임무―매크로 임무

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.