[JS] 자바스크립트 동작 원리 1 (스레드, 동기, 비동기)

0. 개념 정리

• 동기syncronize : 일이 순차적으로 처리됨 
• 비동기asyncronize : 일이 동시에 처리됨 
• 싱글스레드sequential : 프로세스가 단일로 동작
• 멀티스레드cuncurrent : 프로세스가 다중으로 동작 

공간 또는 일꾼 , 프로세스에서 일을 하는 주체

 

 

총 4가지의 경우의 수, JS의 경우 3번째

 

 

 

1. 자바스크립트 런타임 환경

• 1-1. 자바스크립트 엔진

자바스크립트 코드를 실행하는 프로그램 또는 인터프리터(해석기)

대체적으로 웹 브라우저에서 사용됨 

엔진에 의한 인터프리터 방식이므로, 별도의 컴파일 (언어 -> 기계어) 과정 필요 없음 

즉, 웹 브라우저에서 즉시 해석되어 실행됨 

 

자바스크립트 엔진과 V8 엔진

 

• 1-2. 자바스크립트 런타임 환경 

- 런타임 환경이란? 

자바스크립트가 동작하는 환경 (=브라우저)

크롬에서 자바스크립트 엔진은 V8 엔진 (인터프리터를 사용하는 대신 JIT 컴파일러 사용)

 

• 1-3. 싱글 스레드와 동기

- 싱글 스레드 

자바스크립트엔진의 callstack(코드를 읽고 수행시키는 공간) 은 1개 => 싱글 스레드

(하지만 자바스크립트가 실행되는 런타임 환경인 브라우저 엔진이 멀티 스레드 환경) 

 

- 동기 

자바스크립트는 "한 작업이 수행되면, 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는" 동기식 처리

callstack 에 쌓인 명령이 순서대로 하나씩 수행됨 

1) 코드가 실행되면 순서대로 callstack에 실행할 함수가 쌓임
2) 쌓인 반대 순서대로 함수가 실행
3) 실행이 된 함수가 callstack 에서 제거 

 

즉, 주문을 받고 음식이 다 만들어진 다음 계산을 할 수 있음 (callstack 에 쌓인 처리들이 다 끝나고, 다음 처리가 가능)

 

 

 

2. 자바스크립트의 비동기 (= aysncronize)

• 2-1. 비동기 처리란

요청을 보내면 요청이 끝날 때까지 기다리는 것이 아니라, 응답의 관계 없이 바로 다음 동작이 실행되는 방식 

 

• 2-2. 비동기 처리가 필요한 이유

하나의 Event가 수행되는 데까지 시간이 오래 걸리는 경우, 

다음 동작 수행에 지장을 주게 됨 (응답이 느린 웹 사이트) 

 

• 2-3. 자바스크립트의 비동기 처리 기능들 

자바스크립트의 Runtime 환경 (=브라우저) 에서는 스크립트 엔진 자체가 제공하는 기능외에 

비동기 처리를 위한 Web API 를 제공 

 

"이벤트 루프"

해당 API를 컨트롤하여 비동기를 가능하게 함 

이벤트 루프는 "지휘자" 같은 역할

• 콜백함수 
• fetch, ajax 

 

 

 

 

---

* 참고 

https://chanyeong.com/blog/post/44 (자바스크립트 스레드 관련참고)

자바스크립트는 왜 싱글 쓰레드일까? :: chanyeong

https://dgjinsu.tistory.com/30 (스레드, 동기 관련 참고)

멀티 스레드와 단일 스레드, 동기와 비동기 제대로 알고 쓰시나요? (feat. 성능 개선)

https://ljtaek2.tistory.com/142 (동기, 비동기 관련참고)

 

https://ljtaek2.tistory.com/129?category=897337 (자바스크립트 동작원리)

 

https://velog.io/@kirin/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84JavaScript-engine (자바스크립트 엔진)

 

https://medium.com/@arada3211/javascript-event-loop-ba42eb7ab957 (V8엔진과 싱글스레드)