동기 & 비동기

자바스크립트의 싱글 스레드 작업 수행 방식

Tread - taskA 0.3s- taskB 0.5s - taskC 0.1s <- 블로킹방식

자바스크립트는 코드가 작성된 순서대로 작업을 처리함

이전 작업이 진행 중 일 때는 다음 작업을 수행하지 않고 기다림

먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다.

-> 동기 방식의 처리

 

자바스크립트의 싱글 스레드 작업 수행 방식

Tread - taskA  0.3s- taskB 20s - taskC 10s

동기적 처리의 단점은 하나의 작업이 너무 오래 걸리게 될 시, 

모든 작업이 오래 걸리는 한나의 작업이 종료되기 전까지 올 스탑 되기 때문에, 흐름이 느려진다.

웹사이트에서 버튼 하나하나마다 30초 씩 걸리면, 속 터진다.

-> 동기 처리 방식의 문제점

 

싱글 쓰레드 방식을 이용하면서, 동기적 작업의 단점을 극복하기 위해 

여러개의 작업을 동시에 실행시킴

즉, 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행함

->비동기 작업

 

JS Engine

Heap : 메모리할당 | Call Stack : 코드실행

 

자료출처 : 한입 크기로 잘라 먹는 리액트(React.js)

 

js는 비동기 함수를 WebAPIs에 넘겨버림

asyncAdd 함수가 실행 된 후 ,Web APIs에서 setTimeout 은 없어짐

Callback Queue 에 cb() 가 넘어감 envent loop에 의해서 call stack에 넘어감

 

콜백지옥

자료출처 : 한입 크기로 잘라 먹는 리액트(React.js)