웹브라우저에서의 자바스크립트 동작원리에 대해 이해하려면 자바스크립트 언어의 특성과 자바스크립트가 실행되는 환경을 이해해야 한다.

1. JavaScript

1-1. 정의

자바스크립트는 Single Thread 언어로, 한 번에 하나의 작업만 처리할 수 있다.

순차적으로 진행되는 모든 과정을 기다려야 한다면 사용자 경험 측면에서 매우 불리할 것이다.

자바스크립트 언어의 이런 한계를 극복하기 위해 웹브라우저에서는 자바스크립트 엔진과 Web API, Event Loop 매커니즘을 통해 여러 작업을 비동기적으로 실행할 수 있도록 돕는다.

1-2. Chrome V8 엔진

가장 유명한 JavaScript 엔진은 크롬 브라우저의 V8엔진이다.

V8엔진은 구글 크롬 브라우저의 기본 엔진으로 웹 브라우저뿐만 아니라 Node.js와 같은 서버 사이드 환경에서도 널리 사용된다.

Node.js : 크롬 V8엔진에서 동작하는 자바스크립트의 런타임 환경

논블로킹과 이벤트 기반 비동기 처리를 통해 싱글 스레드 언어인 자바스크립트의 한계를 보완한다.

[이벤트 기반]
특정 이벤트가 발생했을 때 지정된 작업을 수행하는 방식이다.
이벤트를 대기하는 함수를 이벤트 리스너라고 하고, 지정된 작업과 관련된 함수를 콜백 함수라고 한다.

1-3. 비동기와 동기

시간을 중심으로 생각해보자.

동기 Synchronous

여러 함수가 시간에 맞춰 실행, 종료되며 작업의 순서와 결과를 예측하기 용이하다.
스택에서 함수가 빠져나가고 다음 함수가 실행이 되며 순차적으로 작업이 진행되는 것을 말한다.

비동기 Asynchronous

여러 함수의 종료시간과 시작시간이 일치하는 것을 보장하지 않는다.
요청 받은 함수가 작업을 마치면 보고한다.(Event Loop의 역할)
한 작업의 완료를 기다리지 않고 다음 작업이 시작되며, 작업의 순서와 결과를 예측하기 어렵다.

1-4. 블로킹과 논블로킹

CPU 제어권을 중심으로 생각해보자. 호출한 함수와 호출된 함수가 있다고 했을 때 블로킹과 논블로킹은 다음과 같다.

[블로킹 Blocking]

호출된 함수가 제어권을 넘겨주지 않아 호출한 함수에서 다른 작업을 진행할 수 없는 것을 말한다.
호출한 함수가 제어권을 넘겨받았을 때 다음 작업을 실행할 수 있다.
즉, 제어권을 중심으로 한 작업이 다른 작업의 실행을 차단하는 것이다.

논블로킹 Non Blocking

호출한 함수가 제어권을 계속 가지고 있어, 다른 작업을 진행할 수 있다.
즉, 한 작업이 다른 작업을 차단하지 않고 계속 실행될 수 있는 것을 말한다.

2. 웹브라우저

앞서 언급했듯 크롬 브라우저에서는 이벤트를 기반으로 자바스크립트가 동작한다. 이벤트 기반으로 동작한다는 것이 어떤 의미인지, Event Loop 개념을 통해서 알아보자.

다음은 자바스크립트가 실행될 때 브라우저 환경이다.

2-1. 콜스택 Call Stack

콜스택이 하나라는 이유는 한 번에 하나의 작업만 수행할 수 있다는 것을 의미한다. 자바스크립트는 이 콜스택이 한 개만 존재하는 Single Thread 언어다.

2-2. Web API

크롬 브라우저의 V8엔진이 가지고 있는 Call Stack이 있고, 크롬 브라우저 자체에서 제공하는 Web API가 있다.

그림을 보면 Web API 내에 setTimeout 함수가 존재하는데, 우리가 자바스크립트에서 저 함수를 작성하면 setTimeout 함수는 Call Stack이 아니라 Web API로 보내져 실행이 된다.

2-3. 콜백 큐 Callback Queue

Web API에서 실행이 완료된 함수는 Callback Queue로 들어가 다음 작업 순서를 기다린다.

예를 들어, 다음과 같은 함수를 실행했다고 가정하자.

function greeting() {
  console.log("Hello World");
}

setTimeout(greeting, 3000);

Web API에서 실행된 setTimeout은 다음 작업인 greeting 함수의 실행을 위해 콜백 큐로 들어가 얌전히 자신의 순서를 기다릴 것이다.

2-4. 이벤트 루프

자바스크립트에서 비동기 작업을 처리하고 코드 실행 순서를 관리하는 핵심 매커니즘이다.

콜스택이 비었는지 확인하고, 비었다면 콜백 큐에 있는 가장 오래된 작업을 콜스택으로 올린다.

콜백 큐에서 가장 먼저 들어온 작업이 Event Loop의 지휘에 따라 콜스택으로 들어가 다음 작업을 수행한다. 앞선 예시를 이어 말하면 greeting 함수가 실행될 것이다.

이와 같이 자바스크립트의 한계를 극복하기 위해 웹 브라우저에서는 다양한 기능을 제공함으로써 비동기적으로 작업을 처리한다.

출처

https://anywaydevlog.tistory.com/60
https://woonys.tistory.com/entry/%EB%85%BC-%EB%B8%94%EB%A1%9C%ED%82%B9-VS-%EB%B9%84%EB%8F%99%EA%B8%B0-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%A4%EB%A5%BC%EA%B9%8C
https://programming119.tistory.com/238