JS Async 비동기처리

Asynchronous 비동기처리

우선 비동기처리와 동기처리의 차이

• 비동기처리
  일이 진행될때 그 일의 결과가 나오는 동안 그 다음일을 시작하고 반복
  결과가 나오면 결과를 제공.
  즉 병렬적으로 일 처리하는 방식.
  JS에서는 대부분의 DOM 핸들러와 Timer함수(setTimeout, setInterval), Ajax요청 등이 비동기처리로 동작.

• 동기처리
  일이 진행될때 그 일 전체가 끝이나고 (결과를 제공하고) 그 다음 일로 넘어간다.
  즉 직렬적으로 일을 처리하는 방식이다.
  JS 일반적으로 위와 같은 요소를 이용하지 않는 경우, 동기로 처리된다.

비동기 처리시 과정

• Call Stack
  작업이 요청되어(일반함수 호출로) 차례대로 call stack에 쌓여 순차적으로 실행이 되고, JS는 하나의 call stack을 사용하기때문에 task종료전까지 다른 task 할 수없다.
  

• Heap
  동적으로 생성된 객체 인스턴스 할당되는 곳

• Task Queue
  비동기 요청처리에서는 일반적으로 DOM핸들러나 Timer함수로 실행될 경우,
  Event가 처리된 후 Task Queue로 들어와 call stack이 다 실행되고 비어져있을 때 Event Loop를 통해 들어가게 된다.

• Microtask Queue
  Microtask Queue 는 Promise가 사용될때 사용되는데
  Task Queue 보다 우선순위가 높아서 Promise가 실행되서 Microtask Queue가 사용되면 Microtask Queue가 다 비워져야 Event Loop가 돌면서 다른 일 진행.

• Animation Frames
  화면 렌더링시에 사용.