자바스크립트가 웹 브라우저에서 동작하는 원리

일단 웹 브라우저 동작원리를 왜 알아야 할까?

- 자바스크립트를 웹 브라우저가 실행하기 때문이다.

웹 브라우저의 동작원리를 알면 자바스크립트가 동작하는 흐름에 대해 더 잘 알게 될 것이다.

웹 브라우저란? - 서버에서 받아온 HTML CSS JS 를 실행시켜주는 프로그램이다.

 

브라우저가 자바스크립트를 실행하는데 일련의 과정이 있다.

 

브라우저는 C++ 이라는 언어로 코드가 짜여져있다.

브라우저는 실행해야할 자바스크립트 코드를 발견하면

C++ 언어로 만들어둔 stack에 넣어 준다.

stack에 쌓인 코드들이다.

console.log(1);
setTimeout(() => { console.log(2)}, 1000);
console.log(3);

// 1
// 3
// 2

stack이란? 스택(stack)은 자료 구조 중 하나로, 데이터를 일시적으로 저장하기 위한 메모리 영역입니다. 데이터를 쌓아 올리는 구조로, 후입선출(LIFO, Last In First Out) 방식으로 동작합니다.

 

하지만 가끔가다가 특별한 코드를 실행해야할 경우가 있다.

• 서버로의 Ajax요청
• 이벤트 리스너
• setTimeout

이런 특별한 코드들이다.

이런 코드는 처리하기까지 대기가 걸린다.

Ajax요청은 서버에서 응답을 받기까지 대기가 걸리고,

버튼 이벤트리스너는 사용자가 버튼을 누르기까지 대기가 걸린다.

그래서 이런 특별한 코드들은 stack에 쌓아서 실행하지 않고

잠깐 보류해놨다가 stack에 쌓인 코드들이 완료되는 시점에 stack으로 보낸다.

 

여기서 stack이 반드시 텅 빈 시점에만 저런 특별한 코드들을 보내도록 되어있다.

아무튼 ajax 요청, 이벤트리스너, setTimeout 이런 특별한 코드는 Queue라는 곳에서 대기한다.

Queue에 있던 코드는 stack으로 옮겨서 실행해주는데  

Stack에 넣어서 실행하려면 Stack이 비어있을 때만 차례로 집어넣어서 실행해준다. (이벤트 루프가 스택이 비어있는지 수시로 계속 확인해준다.)

 

Queue란? 큐(Queue)는 자료 구조 중 하나로, 데이터를 일시적으로 저장하기 위한 메모리 영역입니다. 데이터를 일렬로 늘어놓은 구조로, 선입선출(FIFO, First In First Out) 방식으로 동작합니다.

이런 식으로 자바스크립트는 동작한다.

처리가 빠른거부터 실행해줘서 자바스크립트가 병렬처리를 하는 언어라고 간과하는 사람들이 있다.

하지만 런타임 환경(브라우저, node.js)이 이런 병렬처리를 도와주는 거지 자바스크립트 자체적으로 병렬처리를 하는것은 아니다. 

위 그림에서도 보았듯이 자바스크립트는 스택이 하나다. 그래서 자바스크립트를 싱글 쓰레드 언어라고도 부른다.

또한 자바스크립트는 기본적으로 동기적으로 처리된다. 동기적이라는 뜻은 한번에 한줄 순서대로 실행된다는 뜻이다.

하지만, 자바스크립트는 가끔가다가 비동기적인 처리도 가능하다.  비동기라는 뜻은 코드가 순서대로 동작하지 않을수도 있다는 뜻이다.

 

만약 비동기적인 처리가 없다면 매우 복잡한 연산을 하는 코드가 있다고 가정했을 때(20초가 걸리는 코드임),

그 복잡한 연산을 하는 코드를 완료하는 동안 다른 코드를 실행하지 못할것이다.

이런 복잡한 연산을 하는 코드를 비동기적으로 처리하면 다른 코드들을 실행가능하다.

setTimeout, 이벤트리스너, ajax 함수 쓰면 비동기적인 처리가 가능하다. 

 

한눈에 잘보이는 그림이 있길래 붙여넣어봄

 

동기/비동기에 관련되서 추가적인 내용은 아래 포스팅에서 더 자세히 다룬다.

2023.03.28 - [Front end/JavaScript] - 동기/비동기처리와 콜백함수

동기/비동기처리와 콜백함수

 

 

 

추가적으로 챗 지피티는 이런식으로 자바스크립트를 말하고 있다.

Q.자바스크립트는 비동기적이야?

 

A. 네, 자바스크립트는 비동기적입니다. 이것은 자바스크립트가 단일 쓰레드(single-threaded)로 동작하기 때문입니다. 즉, 자바스크립트는 한 번에 하나의 작업만 수행할 수 있습니다. 하지만 자바스크립트에서 비동기적으로 실행되는 함수를 사용하면, 다른 작업을 수행하는 동안에도 이전 작업이 완료될 때까지 기다리지 않고 다음 코드를 실행할 수 있습니다.

자바스크립트에서 비동기적으로 실행되는 함수에는 setTimeout, setInterval, XMLHttpRequest, fetch, Promise 등이 있습니다. 이러한 함수들은 비동기적으로 실행되며, 작업이 완료되면 콜백 함수를 호출하거나 Promise 객체의 상태를 변경하여 다음 작업을 처리할 수 있도록 합니다.

비동기적으로 실행되는 코드를 작성할 때에는 콜백 함수, Promise, async/await 등을 사용하여 비동기적인 작업의 순서와 결과를 다룰 수 있습니다.

 

챗 지피티는 자바스크립트가 비동기적이라고 말하고있다. 이것도 어찌보면 맞는말이다. 자바스크립트 엔진만 보면 동기적이나, 자바스크립트 런타임환경까지 고려한다면 비동기적이라고 말할 수 있다.

 

 

추가적으로 파인드는 이런식으로 자바스크립트를 말하고 있다.

 

 

 

🌈 정리

결과적으로 자바스크립트 자체는 싱글스레드가 맞지만, 현실적으로 자바스크립트 엔진이 독립적으로 실행되지 않기 때문에 자바스크립트와 Web API, 이벤트 루프 등의 런타임 환경(멀티스레드로 동작)을 분리하여 말하기가 어렵다.

 

- 자바스크립트는 기본적으로 동기적으로 동작한다. 하지만 런타임환경까지 고려한다면 비동기적으로 동작하게 할 수 있다.