[JS]비동기 프로그래밍

동기식 처리 모델(Synchronous processing model)

직렬적으로 태스크(task) 수행한다

태스크는 순차적으로 실행되며 어떤 작업 수행 중이며 다음 작업은 대기한다

서버에서 데이터 요청을 받아 화면에 표시하는 작업 수행 시, 서버에 데이터 요청 후 응답될 때까지 태스크들은 블로킹(blocking, 작업 중단)이 된다.

 

function first() {
  console.log('first');
  second();
}

function second() {
  console.log('second');
  third();
}

function third() {
  console.log('third');
}

first();

 

 

비동기식 처리 모델(Asynchronous processing model / Non-Blocking processing model)

병렬적으로 태스크(task) 수행한다

태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 태스크를 실행한다

서버에서 데이터 요청하여 화면에 표시하는 태스크 수행할 때, 서버에 데이터를 요청한 이후 서버로부터 데이터가 응답될 때까지 대기하지 않고(non-blocking) 즉시 다음 태스크를 수행한다

 

 

브라우저에서의 비동기 프로그래밍은 주로 통신과 같이 오래 걸리는 작업들을 브라우저에 위임할 때 이루어진다.

- 자바스크립트의 대부분의 DOM 이벤트 핸들러와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작한다

 

 

비동기 프로그래밍 방식은 대개 프로그램의 성능과 응답성을 높이는 데에 도움을 줍니다. 하지만 코드가 실제로 실행되는 순서가 뒤죽박죽이 되므로, 코드의 가독성을 해치고 디버깅을 어렵게 만든다는 비판을 받아왔습니다. 이런 문제를 해결하기 위해 비동기 프로그래밍을 위한 여러 기법이 생겨났고, 또 어떤 것들은 JavaScript 언어 자체에 포함되기도 했습니다. 

 

function first() {
  console.log('first');
  second();
}

function second() {
  setTimeout(function() {console.log('second')}, 0);
  third();
}

function third() {
  console.log('third');
}

first();

 

 

 

 

Source

https://poiemaweb.com/js-async
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous
https://helloworldjavascript.net/pages/285-async.html