동기와 비동기

자바스크립트의 동기와 비동기

• 운영체제에서 자주 듣던 말이다.
• 멀티 프로세스, 스레드 프로그래밍에서의 동기화, 입출력에 따른 프로세스의 waiting 등에서 들었다.
• 하지만 JS에서의 동기와 비동기는 하나의 스레드가 하나의 코드를 읽는 동안, 발생하는 상황에서의 개념이다.
• 그 이유는 JS는 하나의 스레드로 돌아가는 언어이기 때문이다.
• 좀 더 정확히 말하자면, 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택(콜 스택)을 갖고, 한 번에 하나의 실행 컨텍스트(task)를 실행하는 싱글 스레드 방식으로 동작하기 때문이다.

동기

• 태스크를 순서대로
• 순서 보장
• 블로킹

비동기

• 태스크가 종료 안 되도, 다음 태스크 실행
• 순서 보장 안 됨

이벤트 루프와 태스크 큐

• 사실 운영체제의 입출력 상황과 비슷하다.
  • 한 프로세스에서 입출력 발생시, 현재 프로세스를 waiting 하고 ready queue의 다른 프로세스를 비동기적으로 실행한다.
  • 이 때, 입출력이 프로세스 내부가 아니라 외부에서 일어나는 것 처럼, JS 엔진 외부의 브라우저의 도움으로 비동기 프로그래밍이 가능해진다.
  • 이벤트 루프와 태스크 큐 모두 브라우저에 내장돼 있는 기능이다.

이벤트 루프

• 이벤트 루프는 콜 스택이 비어있는지 (모든 실행이 끝났는지) 감지하고, 비었다면 태스크 큐에 있는 함수를 콜 스택에 푸시한다.
• 빈 콜 스택 어떻게 감지? -> polling? or Observer Pattern?

태스크 큐

• 브라우저는 비동기 함수의 콜백 함수를, 비동기 작업이 끝나면 태스크 큐에 넣는다.
• 정확히 말하면, 비동기 함수는 브라우저 API(타이머 함수, HTTP 요청 등)을 콜백함수나 인자를 argument로 호출하고, 호출된 브자우저 API는 해당 작업을 마무리하고, 콜백함수를 태스크 큐에 넣는다.
• 따라서, 자바스크립트가 비동기 함수를 실행하고 콜 스택에서 pop 한 후 이어지는 작업과, 브라우저가 비동기 함수를 실행하는 작업은 병렬적으로 일어난다.

큐의 우선순위

• 마이크로 태스크 큐 > 애니매이션 프레임 > 태스크 큐
  📌 이때, 브자우저는 멀티 스레드로 작동한다.