Frontend

자바스크립트가 싱글스레드인가? (+이벤트루프)

단점이없어지고싶은개발자 2022. 4. 6. 17:55
반응형

1. 싱글 스레드와 멀티스레드

프로그램 내의 처리 실행 단위 혹은 CPU의 이용 단위를 나태는 단어에 스레드(Thread)가 있다.

일련의 처리를 단일 스레드만으로 직렬 처리하는 프로그래밍 방법을 싱글 스레드 프로그래밍이라고 한다.

반면 동일 어드레스 공간의 메모리를 공유하면서 병렬로 처리하는 방법을 멀티 스레드 프로그래밍이라고 한다.

싱글 스레드의 장점

  • 자원 접근에 대한 동기화를 신경쓰지 않아도 된다.
    • 여러 개의 스레드가 공유된 자원을 사용할 경우 각 스레드가 원하는 결과를 얻게하려면 공용 자원에 대한 접근이 통제되어야하는데 그럴 경우, 프로그래머에게 많은 노력 요구 및 비용이 발생한다.
  • 문맥 교환(context swtich)작업을 요구하지 않는다.
    • 문맥 교환은 여러 개의 프로세스가 하나의 프로세스를 공유할 때 발생하는 작업으로 많은 비용을 필요로 한다.

싱글 스레드의 단점

  • 여러 개의 CPU를 활용하지 못한다.
  • 연상량이 많은 작업을 하는 경우, 그 작업이 완료되어야 다른 작업을 수행 할 수 있다.
  • 싱글 스레드 모델은 에러처리를 못하는 경우 멈추지만, 멀티 스레드는 에러 발생 시 새로운 스레드를 생성하여 극복한다.

멀티 스레드의 장점

  • 새로운 프로세스를 생성하는 것보다 기존 프로세스에서 스레드를 생성하는 것이 빠르다.
  • 프로세스의 자원과 상태를 공유하여 효율적으로 운영이 가능하다.
  • 프로세스의 문맥교환보다 스레드의 문맥교환이 빠르다.

멀티스레드의 단점

  • 하나의 스레드만 실행중일 때에는 실행시간이 되려 지연 될 수 있다.
  • 멀티 스레드를 위한 운영체제의 지원이 필요하다.
  • 스레드 스케쥴링을 신경써야 한다.

그렇다면 자바스크립트는 싱글쓰레드인가?

자바스크립트의 메인 스레드인 이벤트 루프가 싱글 스레드이기 때문에 자바스크립트이기 때문에 싱글 스레드 언어라고 부른다.

싱글 쓰레드인데 한 번에 여러 요청을 처리할까?

기존 동기적 요청은 코드를 한줄 한 줄 차례대로 실행한다. 그래서 하나의 작업에 걸리는 시간에 관계 없이 첫 번째 코드가 실행 된 뒤 순차적으로 실행된다. 즉, 앞의 작업시간이 길어질수록 시간 및 자원의 낭비가 심해진다. 하나의 요청이 완료될 때까지 기다리지 않고 동시에 다른 작업을 실행하는 비동기 호출로 극복할 수 있다.

그렇다면 비동기 처리는?

자바스크립트의 코드는 이벤트 루프 기반으로 작동한다. 즉, 실행되는 함수를 싱글 스레드 형식으로 처리하는 메인 콜 스택이 있고, 이 콜 스택이 비었을 때마다, 콜백 큐 에서 대기중인 함수를 콜 스택으로 불러와 실행시킨다.

만약 setTimeout 이나 ajax 같은 비동기 함수가 호출되면, 해당 작업은 브라우저에 내장된 WebAPI에게 넘겨진다. 그 안에서 동작을 하거나 네트워크 통신을 진행하고, 코드가 실행될 준비가 되면 콜백 큐에 해당 작업을 넣어준다. 비동기 함수와 동기적인 함수가 동시에 동작하는 것처럼 보이지만, 아주 빠르게 콜 스택에 넘어와 실행되었기 때문이다.

  • Call Stack : 자바스크립트에서 수행해야 할 함수들을 순차적으로 스택에 담아 처리(스택이 하나이기 때문에 single threaded!!)
  • Web API : 웹 브라우저에서 제공하는 API로 AJAX나 setTimeout 등의 비동기 작업, 이벤트리스너 등을 실행
  • Task Queue : Callback Queue라고 하며 Web API에서 넘겨받은 Callback함수를 저장
  • Event Loop: CallStack이 비어있다면 Task Queue의 작업을 CallStack으로 순차적으로 옮김

참조

TIL. 싱글스레드 vs 멀티스레드 11/20

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

개발자 90%가 모르는 자바스크립트 동작원리 (Stack, Queue, event loop)

반응형

'Frontend' 카테고리의 다른 글

리덕스란? + 다른 상태관리 라이브러리들  (0) 2022.04.06
REST API란?  (0) 2022.04.06
Test Code란?  (0) 2022.03.28
React Hook의 장단점  (0) 2021.12.26
React를 사용하는 이유는? (Vue, Angular의 차이)  (0) 2021.12.25