이 그림에서 프로그램은 프로세스 1을 블로킹 호출합니다. 즉, 프로그램은 프로세스 1이 호출자(프로그램)에게 제어권을 반환할 때까지 기다려야 프로세스 2를 진행할 수 있다는 뜻입니다. 이러한 시스템은 키오스크나 단순 단말기에는 적합하지만, 브라우저 UI에서는 이 방식으로 구현해서는 안 됩니다. 끔찍한 사용자 경험(UX)뿐만 아니라 일정 시간 동안 활동이 없으면 스크립트가 응답하지 않는다고 여기고 브라우저가 스크립트를 종료할 수도 있습니다. 다음은 애플리케이션을 블로킹하고 서버가 응답하기를 기다리는 HTTP 호출을 만드는 예제입니다.

let items = blockingHttpCall('/data'); -- 서버 측 데이터를 동기로 로드하면 프로그램 실행이 멈추게 됩니다. 여기서 사용된 데이터의 특성은 중요하지 않습니다. 실행된 애플리케이션과 관련된 일반적인 예제 데이터라고 보면 됩니다.
items.forEach(item => {
// 각 항목 처리
}); 

이보다 나은 방법은 HTTP 호출을 실행하고 응답을 기다리는 동안 다른 작업을 수행하는 겁니다. 그런데 이 장기 실행 작업만 문제인 것은 아닙니다. 앞서 말했듯이 마우스를 움직이면 매우 빠르고 세밀한 이벤트가 빠르게 연속적으로 생성됩니다. 각각의 이벤트들을 동기로 처리한다면 대기 시간이 길든 수백 가지 작은 대기 작업을 빠르게 처리하든 결국은 전체 애플리케이션은 응답하지 못하게 될 겁니다. 그렇다면 이러한 문제를 논블로킹 방식으로 어떻게 해결할 수 있을까요? 다행히도 자바스크립트는 콜백 함수를 제공합니다.