js 이벤트 루프의 예에 대한 자세한 설명

이전에 일부 이벤트 루프 블로그를 읽었지만 한동안 읽지 않다가 다 잊어버렸다는 사실을 깨닫고 이를 요약하기 위해 블로그를 작성하기로 결정했습니다!

먼저 이벤트 루프가 무엇인지 설명하겠습니다.

우리가 아는 한, 브라우저의 js는 단일 스레드입니다. 즉, 최대 하나의 코드 세그먼트가 동시에 실행됩니다. 하지만 브라우저는 비동기 요청을 매우 잘 처리할 수 있는데, 그 이유는 무엇일까요? 먼저 사진부터 보겠습니다

위 그림을 보면 js 메인 스레드에 실행 스택이 있고 모든 js 코드가 실행 스택에서 실행되는 것을 볼 수 있습니다. 코드를 실행하는 동안 비동기 코드(예: setTimeout, ajax, promise.then 및 사용자 클릭 등)가 발생하면 브라우저는 이러한 코드를 스레드에 넣습니다(여기에서는 이를 비하인드 코드라고 부릅니다). -scenes 스레드) 대기는 메인 스레드의 실행을 차단하지 않습니다. 백그라운드 스레드의 코드가 준비되면(예: setTimeout 시간이 종료되고 ajax가 실행됨) 요청이 응답되면 스레드가 이를 처리합니다. 콜백 함수는 실행을 기다리는 작업 대기열에 배치됩니다. 메인 스레드가 스택의 모든 코드 실행을 마치면 작업 큐를 확인하여 실행할 작업이 있는지 확인합니다. 실행될 작업이 있으면 작업이 실행 스택에 배치됩니다. 실행. 현재 작업 대기열이 비어 있으면 작업이 도착할 때까지 루프를 계속 기다립니다. 따라서 이를 이벤트 루프라고 합니다.

여기서 질문이 나옵니다. 작업 대기열에 많은 작업이 있는 경우 어떤 작업을 먼저 실행해야 합니까?

실제로 (위 그림과 같이) js에는 두 개의 작업 대기열이 있는데 하나는 Macrotask Queue(Task Queue)라고 하고 다른 하나는 Microtask Queue라고 합니다

전자는 주로 상대적으로 일부 작업을 수행하는 데 사용됩니다. setTimeout, setInterval, 사용자 상호 작용, UI 렌더링 등이 있습니다.
후자는 주로 비교적 작은 작업을 수행하는 데 사용됩니다. 일반적인 작업에는 Promise, process.nextTick(nodejs)
• 이 포함됩니다.

그럼 둘의 구체적인 차이점은 무엇인가요? 아니면 두 작업이 동시에 나타나는 경우 어떤 작업을 선택해야 할까요?

실제로 이벤트 루프가 하는 일은 다음과 같습니다.

매크로태스크 대기열이 비어 있는지 확인하고 비어 있으면 다음 단계로 진행합니다. 3
매크로태스크 대기열에서 첫 번째 작업을 가져옵니다(대기열에서 가장 긴 작업). 실행 스택(하나만)에서 실행합니다. 실행 후 다음 단계로 이동합니다.
마이크로태스크를 확인합니다. 큐가 비어 있는지 여부, 비어 있으면 다음 단계로 이동합니다. 그렇지 않으면 1로 점프합니다. 새로운 이벤트 루프)
마이크로태스크 큐에서 큐의 선두에 있는 태스크(큐에서 가장 긴 시간을 가진 태스크)를 가져와서 이벤트 큐에 입력합니다. 실행 후 3

4. 으로 점프합니다.
그 중 코드 실행 중에 추가된 마이크로태스크 작업은 현재 이벤트 루프 주기 내에서 실행되는 반면, 새로 추가된 매크로태스크 작업은 다음 이벤트 루프가 실행될 때까지만 기다릴 수 있습니다(이벤트 루프는 하나만 실행합니다. 매크로태스크)

먼저 코드를 살펴보겠습니다

console.log(1)
setTimeout(function() {
  //settimeout1
  console.log(2)
}, 0);
const intervalId = setInterval(function() {
  //setinterval1
  console.log(3)
}, 0)
setTimeout(function() {
  //settimeout2
  console.log(10)
  new Promise(function(resolve) {
    //promise1
    console.log(11)
    resolve()
  })
  .then(function() {
    console.log(12)
  })
  .then(function() {
    console.log(13)
    clearInterval(intervalId)
  })
}, 0);

//promise2
Promise.resolve()
  .then(function() {
    console.log(7)
  })
  .then(function() {
    console.log(8)
  })
console.log(9)

결과가 어떻게 되어야 한다고 생각하시나요?노드 환경과 크롬 콘솔에서 출력한 결과는 다음과 같습니다.

1
9
7
8
2
3
10
11
12
13

위 예시에서 첫 번째 이벤트 루프 인

:

console.log(1)이 실행되고, 출력 1
settimeout1이 실행되고, 매크로태스크 대기열에 합류
setinterval1이 실행되고, 매크로태스크 대기열
set에 합류 시간 초과2 실행, 매크로태스크 대기열에 참여
promise2가 실행되고, 두 함수가 마이크로태스크 대기열에 추가됩니다.
console.log(9)가 실행되고, 이벤트 정의에 따라 9
이 출력됩니다. loop, new가 실행됩니다. 추가된 마이크로태스크 작업은 대기열에 들어간 순서대로 실행됩니다. Console.log(7) 및 console.log(8)이 출력됩니다. 마이크로태스크 대기열은 비어 있습니다. 첫 번째 단계로 돌아가서 다음 이벤트 루프에 들어갑니다. 이때 매크로태스크 대기열은 다음과 같습니다: settimeout1, setinterval1, settimeout2

7. 
   

두 번째 이벤트 루프:

팀장에서 작업을 수행합니다( settimeout1)을 매크로태스크 대기열에서 실행하면 2가 출력됩니다.

마이크로태스크 대기열이 비어 있으면 첫 번째 단계로 이동하여 다음 이벤트 루프에 들어갑니다. 이때 매크로태스크 대기열은 setinterval1, settimeout2

1. 
   

입니다. 세 번째 이벤트 루프:

매크로태스크 대기열에서 팀장(setinterval1)의 작업을 가져와서 실행하고 3을 출력한 다음 새로 생성된 setinterval1을 매크로태스크 대기열에 추가합니다. 첫 번째 단계로 돌아가서 다음 이벤트 루프에 들어갑니다. 이때 매크로태스크 대기열은 다음과 같습니다: settimeout2, setinterval1

1. 
   

   네 번째 이벤트 루프:

팀장에서 작업을 맡습니다. settimeout2)를 매크로태스크 대기열에서 실행하고 10을 출력하고 새 Promise의 함수를 실행합니다(새 Promise의 함수는 비동기 작업이 아닌 동기 작업입니다). 출력 11과 마이크로태스크 대기열에 두 개의 then 함수를 추가합니다

마이크로 태스크 큐에서 큐의 선두에 있는 태스크를 가져와 비어 있을 때까지 실행합니다. 따라서 새로 추가된 두 개의 마이크로태스크 작업이 순서대로 실행되어 출력 12와 13이 되며, 이때 마이크로태스크 대기열과 매크로태스크 대기열은 모두 비어 있습니다. 브라우저는 항상 대기열이 비어 있는지 확인하고 대기합니다. 새로운 작업이 대기열에 추가됩니다.

여기서 첫 번째 루프에서 왜 매크로태스크가 먼저 실행되지 않는지 생각할 수 있습니다. 왜냐하면 프로세스에 따라 먼저 매크로태스크 대기열이 비어 있는지 확인한 다음 마이크로태스크 대기열을 확인해야 하지 않을까요?

이유: 처음에 js 메인 스레드에서 실행되는 작업은 매크로태스크 작업이므로 이벤트 루프의 프로세스에 따라 이벤트 루프는 메인 스레드의 코드를 실행한 후 하나의 매크로태스크 작업만 실행합니다. , 팀 리더를 데리고 마이크로태스크 대기열로 이동합니다.

참고:

마이크로태스크 작업을 실행할 때 마이크로태스크 대기열이 비어 있을 때만 다음 이벤트 루프에 들어갑니다. 따라서 지속적으로 새로운 마이크로태스크 작업을 생성하면 메인 스레드가 마이크로태스크를 실행하고 있습니다. 그리고 매크로태스크 작업을 실행할 수 있는 방법이 없으므로 UI ​​렌더링/IO 작업/ajax 요청을 수행할 수 없으므로 이러한 상황을 피해야 합니다. nodejs의 process.nextick에서 메인 스레드 차단을 방지하기 위해 최대 호출 수를 설정할 수 있습니다.

이를 통해 타이머 문제라는 새로운 문제를 소개합니다. 타이머는 실제적이고 신뢰할 수 있나요? 예를 들어 setTimeout(task, 100) 명령을 실행하면 100밀리초 후에 정확하게 실행됩니까? 사실 위의 논의를 바탕으로 우리는 이것이 불가능하다는 것을 알 수 있다.

모두가 그 이유를 알아야 한다고 생각합니다. 왜냐하면 setTimeout(task,100)을 실행한 후 실제로는 작업이 100밀리초 후에 매크로태스크 대기열에 들어가는 것을 보장하기 때문입니다. 그러나 이는 현재 작업이 즉시 실행될 수 있다는 의미는 아닙니다. master 스레드가 시간이 많이 걸리는 작업을 수행하고 있거나 현재 마이크로태스크 대기열에 많은 작업이 있을 수 있으므로 이것이 모두가 setTimeout을 비난하는 이유일 수도 있습니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

위 내용은 제 개인적인 견해 중 일부일 뿐입니다. 이벤트 루프 및 기타 훌륭한 기사를 참조하세요

위 내용은 js 이벤트 루프의 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!