이벤트 루프와 매크로·마이크로태스크

이벤트 루프와 매크로·마이크로태스크

브라우저의 JS 엔진 방식

• 이벤트 루프

  태스크가 들어오길 기다리다가 태스크가 들어오면 처리하고 처리가 끝나면 다시 잠드는 JS 내 루프

  큐(선입선출) 구조로 태스크 처리

• 매크로 태스크

  엔진이 바쁠 때 큐에 추가되는 태스크

  • 활용

    1. 큰 일을 재귀 함수와 setTimeout 을 이용해 분할해서 처리

    2. 진행 상태를 보여주는 프로그래서 바 만들 때 처리

    3. 이벤트 처리가 끝난 후에 작업할 때 setTimeout 을 이용해 처리

• 마이크로 태스크

  Promise(핸들러 포함), async await 사용해 만들어짐

  queueMicrotask(func) 사용하여 마이크로 태스크 큐에 넣어 처리할 수 있음

• 엔진 원리

  특정 태스크 처리하는 동안은 렌더링(DOM 변경)을 하지 않음

  매크로 테스트 하나 처리 후 마이크로 태스크 큐에 있는 마이크로 태스크 전부 처리 후 다음 매크로 태스크 하나 처리