자바스크립트 이벤트 처리

.·2022년 7월 1일
0

blog

목록 보기
32/52

[1] 자바스크립트 이벤트 처리

  • 동기 함수는 Execution Context를 생성해서 Stack에 Push한다.
  1. Execution Context를 생성
  2. Stack에 함수가 모두 사용되면 Execution Context를 Pop시킨다. 이때를 Stack이 완전히 비어있다고 판단한다.
  3. setTimeout(), 이벤트 핸들러, Ajax, Request HTTP 등 Web API를 요청하면 Callback 함수를 같이 보낸다.
  4. Web API가 완료가 되면 Task Queue에 Callback 함수를 Task Queue공간에 넣는다.
  5. JS Engine에 Event Loop가 Stack이 완전히 비어있는지 확인을 하고 비어있다면 Task Queue공간에 Callback함수가 있는지 판단을 하고 있다면 Stack공간으로 이동시킨다.

대다수의 언어는 멀티스레드로 처리가 되는데 자바스크립트는 싱글쓰레드로 이벤트를 처리한다.

  • 관련 용어: 스택, 이벤트 루프, 큐, 비동기, 마이크로 큐, 매크로 큐

macro queue : setTimeout
micro queue : promise (우선먼저 처리)

https://ingg.dev/213a51586e94904c5075045d2c94273b/work22.svg

0개의 댓글