[TIL]동기와 비동기

동기: 이전 작업이 끝날때 까지 기다렸다가 끝난 이후 다음 작업을 실행하는것
비동기: 이전 작업의 완료여부와 관계 없이 다음 작업을 실행하는 것

자바스크립트에서 비동기는 아래와 같은 상황에서 발생한다.

 

👉 DOM Element 의 이벤트 이벤트 핸들러

- 마우스, 키보드 입력 (click, keydown 등), 페이지 로딩 (DOMContentLoaded 등)

 

👉 타이머

- 타이머 API (setTimeout 등), 애니메이션 API (requestAnimationFrame)

 

👉 서버에 자원 요청 및 응답

- fetch API, AJAX (XHR)

 

사실 위 사진이 자바스크립트 비동기 작업의 전부이다.

추가 할 점이 있다면 콜스택 옆에 메모리힙이 있다.

 

콜스텍과 실행컨텍스트 그리고 메모리힙

 

실행컨텍스트는 실행되는 코드의 환경을 의미한다.

콜스택은 코드 실행 순서를 관리하고 메모리 힙은 데이터를 저장한다. 

(전역,지역(함수))실행컨텍스트는 콜스택에 푸시되는 대상이며

콜스택 내의 실행 컨텍스트는 필요한 데이터를 메모리 힙에 접근하여 수정 사용한다.

 

다음은 비동기 작업의 순서이다.

1. 비동기 작업이 콜 스택에 올라온다(ex setTimeout)
2. 해당 비동기 작업은 콜 스택에서 웹 api로 이동하여 처리된다.
   1. 처리(settimeout의 대기시간 혹은 api요청 시간) 시간 동안은 web api에서 머문다.
3. 처리가 끝난 비동기 작업은 콜백 큐(위 사진의 테스트큐와 마이크로테스트큐)로 이동한다.
   1. 프로미스 작업은 마이크로테스크 큐로 이동
   2. 나머지 비동기 작업은 테스크 큐로 이동
4. 콜스택이 비워져 있음을 확인 하고 콜백 큐에서 콜스텍으로 이동한다.(이벤트 루프)
   1. 콜백 큐중 마이크로테스크큐에게 우선권이 있다.
   2. 이후 애니메이션프레임스와 테스크 큐 순이다.
5. 반복

 

위와 같은 이벤트루프를 알고 있으면 다음과 같은 사항에 유의할 수 있다.

1. 비동기 작업은 콜스택이 비워져 있어야 작동한다. 콜스택에 너무 무거운 작업이 올라가면 안된다. (블로킹 발생)
2. 긴 작업은 비동기로 처리하거나 작은 단위로 나누어 처리해야 한다.