[javascript] eventloop와 비동기 동작...

자바스크립트는 단일쓰레드에서 동작한다고 한다.

그렇다면 setTImeout 같은 비동기 함수는 뭘까?...

그리고 단일 쓰레드로 작동한다면 서버랑 통신을 할떄 끝나는 시간이 길어지면 브라우저에서 한 동작을 진행하는 시간이 너무 오래 걸린다면 다른 일은 아무것도 하지 못하게 된다.

문제 상황에 대비해서 단일쓰레드인 javascript에서  비동기적인 프로그래밍이 가능하도록 장치를 해두었다.

그것이 Event Queue 와 Event Loop라고 한다.

 

Call Stack

Call stack은 자바스크립트 말고도 다른 대부분의 언어에 존재하는 것이다.

함수가 실행되면 Callstack 에 해당 함수가 쌓이고 스택과 같은 구조로 동일하게 작동된다.

함수가 종료되면 해당 함수는 callstack에서 제거된다.

함수가 종료되기 전에 다른 함수와 연결되어 실행되면 기존 함수 스택위에 또 새로운 스택으로서 쌓이게 된다.

하지만 비동기적으로 프로그램을 작동시킬려고 한다면, 다른 공간에서 동작하는 것이 필요할 것이다.

 

Event Queue & Event Loop

자바 스크립트의 Event Loop와 Event Queue는 이러한 상황을 해결할 수 있게 한다.

비동기적 함수로 실행되는 것은 바로 call stack에 쌓이지 않고 event Queue로 넘어가게 된다.

call stack에 있는 함수다 실행이 되었을떄 event loop에서 event queue를 확인해서 오래된 함수부터 실행시킨다.

 

Zero Delay

setTimeout(func,0);

대표적인 비동기 함수인 setTimeout 이다. 대기시간이 0이라서 바로 실행하는 것 처럼 보이지만 그렇지않다.

콜스택에 이미 다른 함수가 있거나 event queue에 먼저온 함수가 있으면 실행 할수 없다.

결국 0이라는 숫자는 최소지연시간일 뿐이고 정확하게 동작하는 시간은 알 수 가 없다.

 

결론

비동기적으로 실행할 것과 아닐 것을 잘 구분지어서 실행하는 것이 중요하다.

그리고 동기적으로 실행할 것과 비동기적으로 실행하는 것을 제대로 구분하여서 코드를 짜야한다.(이게 참 어려운듯하다)

화면 렌더링이나, 스크롤에 관련된 동작이 있다면 잘 못 코드를 작성할 경우에 엄청나게 치명적이게 됩니다.

mdn에서 추천하는 방법은  메시지 처리를 짧도록 만드는 것과 하나의 메시지를 여러개의 메시지로 나누는 것 입니다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop

Concurrency model and Event Loop