자바스크립트 비동기

     

목차

 

 

 

 

호스트, 자바스크립트 런타임

자바스크립트 환경을 구성한다.   ex) 브라우저, Nodejs

 

Js Engine

->자바스크립트 언어 해석기 (js -> bytecode) V8, Webkkit

- Heap - 동적으로 생성된 자바스크립트 객체가 저장되는 공간

- Call stack - 자바스크립트 엔진이 코드 실행을 위해 사용하는 메모리 구조

 

 

EventLoop

Task를 조정하기 위해 서용, agent마다 1개

• TaskQueue: 실행 가능한 Task를 저장하는 Set. 1개 이상임. (각각의 프로세스를 더 빠르게 사용하기 위해서.)
  • Task: 이벤트, Web API 등등
• MicrotaskQueue: JobQueue 라고도 부름 (ECMA Script) - 논리적
  • Microtask: 빠르게 처리해야 할 task : Promise, MutationObserver …
  • task 가 끝날 때 마다, Microtask Queue 모두 실행.

 

Web API 

타이머, 네트워크 요청, 파일 입출력, 이벤트 처리 등 브라우저에서 실행 할 수 있는 API, 실행은 브라우저 엔진에 위임.

• 병렬 처리 가능하다. -> 멀티스레드로 이루어짐
• Task 로 분류 됨.

 

++추가 정보

모든 web api들이 비동기적으로 동작되는 것은 아니다. 예로는 dom api나 console api는 동기적으로 처리되고 XMLHttpRequest나 Timer API는 비동기적으로 처리된다.

 

 

TaskQueue (Macrotask Queue)

• task 를 저장하기 위한 큐
• EventLoop 마다 1개 이상의 큐
• Set (FIFO 아님) : 실행 가능한 Task 를 반환해야하기 때문에

 

 

Microtask Queue (Job Queue)

• Promise, MutationObserver 등 을 위한 큐
• 콜스택이 비워지거나, 하나의 Task 가 종료되면 모두 실행
• queueMicrotask 메서드로 콜백 등록 가능
• V8 엔진 내부에 구현, 관련 메서드 제공.
  • performMicrotaskCheckpoint : microtask queue 를 비우고, 모두 실행
• but, 이벤트루프에 의해서 스케줄링 됨

 

Event Loop 동작 과정

1. 콜스택에 스크립트가 올라가서 동기 코드 실행
2. 동기 코드가 비동기 API 호출하면 Web API가 처리하고 콜백을 적절한 큐에 넣음
3. 콜스택이 비워지면 마이크로태스크 큐를 모두 비움(모든 마이크로태스크 실행)
4. 마이크로태스크가 끝나면 렌더링(브라우저가 필요한 경우)
5. 렌더링 이후 매크로태스크 큐에서 다음 작업을 하나 꺼내 실행
6. 반복

 

NodeJs에서는 어떻게 동작할까?

NodeJS 환경에서도 브라우저와 거의 비슷한 구조를 볼 수 있는데, 차이점이 있다면 내장된 libuv 라이브러리를 사용하여 비동기 IO를 지원한다는 점이다. 단 Node.js에서도 일부 Web Api를 사용할 수 있는데 setTimeOut, setInterval 등이 그렇다.

 

Nodejs 참고

https://be-senior-developer.tistory.com/321

[NodeJs] os 관점에서 더 자세히 알아보자

 

 

 

참고

https://inpa.tistory.com/entry/%F0%9F%94%84-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84-%EA%B5%AC%EC%A1%B0-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC

🔄 자바스크립트 이벤트 루프 동작 구조 & 원리 끝판왕