# 프로세스와쓰레드
- 프로세스(Process)란? 컴퓨터에서 연속적으로 실행되고 있는 컴퓨터 프로그램
- 쓰레드(Thread)란? 어떠한 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위
- 보통 하나의 쓰레드를 가짐
- 여러개의 쓰레드를 동시에 실행할 수 도 있음 - multithread
- 한 프로세스 안에서 code, data, heap을 공유함
- 메모리 구성 : code, data, heap, stack
# 동기 처리
- 함수호출 → 실행컨텍스트 생성
- 실행컨텍스트는 콜스택에 추가(push) 되고 종료 후 제거(pop) 됨
- 콜스택(Call Stack) : LIFO(Last In First Out) 라고 부르는 자료구조, 제일 나중에 들어온것이 제일 처음으로 나간다는 뜻
- 자바스크립트는 단하나의 콜스택을 가짐 (싱글쓰레드 방식)
- 실행순서가 보장되지만 순서대로 처리하며 블로킹되는 단점이 있음
# 비동기 처리
- 현재 실행 중인 태스크가 종료 되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식
- setTimeout, setInterval, HTTP요청, 이벤트 핸들러등
# 이벤트루프와태스크큐
- 브라우저는 동시에 많은것이 동작하는것 처럼 보이는데 이런 동시성을 지원하는 것이 이벤트루프이다.
- 브라우저에 내장되어 있는 기능
- 큐(queue) : FIFO(First In First Out) 라고 부르는 자료구조, 제일 처음 들어온 것이 제일 처음에 나가는 것
- 태스크큐(task queue) : 비동기 함수의 콜백함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역
- 마이크로태스크큐(microtask queue) : 프로미스의 후속처리 메서드의 콜백함수가 일시적으로 보관되는 영역
자바스크립트엔진에 있는 콜스택은 한번에 하나의 일만 수행하며 실행순서를 기억한다.
❔한번에 여러가지를 동시에 실행할 수 있게 즉 비동기적으로 처리하려 어떻게 해야할까?
- 자바스크립트 런타임 환경에서는 다양한 web API를 제공해주는데 이것을 사용하면 우리가 만든 콜백함수를 태스크큐에 넣어두게 된다.
- 이때 이벤트루프가 콜스택과 태스크큐를 돌면서 콜스택이 비어져있는걸 발견하면 태스크큐에 있는 콜백함수를 콜스택에 넣어 실행하게 된다.
- 이벤트루프는 이런과정을 반복하며 함수를 실행한다.
❔마이크로태스크큐와 태스크큐의 차이점?
- 이벤트루프가 마이크로태스크큐 영역에 가면 그곳에 있는 모든 함수들을 실행한 다음에야 다시 이벤트 루프가 다음 영역으로 간다. 즉 새로운 APIs를 계속 만들어내면 이벤트루프는 그곳에 계속 머무르고 이벤트는 실행되지 않는다.
- 태스크큐 영역에 가면 한번에 하나의 함수만 실행한 후 이벤트루프가 다음 영역으로 간다. 즉 여러개의 함수가 있다고 하더라도 이벤트는 실행된다.
✨ 콜스택에 있는 함수 실행 → 이벤트 루프 실행 → 렌더과정 처리 → 마이크로태스크큐 처리 → 태스크큐 처리 → 콜스택 확인 → 다시 과정 반복
📌 참고
드림코딩(https://academy.dream-coding.com/courses/browser101)
모던자바스크립트 Deep Dive
'Web' 카테고리의 다른 글
#3 이벤트란? (0) | 2023.01.27 |
---|---|
#2 DOM이란? (0) | 2023.01.26 |
#1 브라우저의 렌더링 과정 (0) | 2023.01.19 |