*Process(Code, Thread(Stack), Heap, Data)
프로세스는 컴퓨터 위에서 즉 운영체제 위에서 연속적으로 실행되고 있는 프로그램을 말합니다.
프로세스는 운영체제 위에서 독립적으로 메모리에서 실행되고 있는 프로그램 입니다.
*Thread(Stack)
쓰레드는 한 프로세스 안에서 여러 개가 동작할 수 있는데요 쓰레드는 각각 저마다 해야 되는 업무를 배정 받습니다. 저마다 필요한 일들을 수행하게 되고 이 쓰레드는 자기들만의 수행해야 되는 함수의 호출을 기억해야 되기 때문에 쓰레드마다 슽캑이 할당되어져 있습니다. 하지만 이 프로세스 안에서 동작하는 일꾼들은 결국은 한 프로그램을 위해서 일해야 되므로 프로세스에 지정된 코드와 데이터 힙들을 공통적으로 접근해서 공톡적으로 업데이트가 가능합니다. 그리고 이런 쓰레드는 동시다발적으로 발생할 수 있기 때문에 이 프로세스가 조금 더 효율적으로 일을 할 수 있도록 도움을 줍니다.
즉 쓰레드는 프로그램안에서 동시에 여러 개가 수행될 수 있는 작은 단위 입니다.
*자바스크립트 런타임 환경
자바스크립트 언어는 Single Threaded language 입니다.
자바스크립트 언어 자체에는 멀티쓰레딩을 할 수 있는 방법은 없지만 이 자바스크립트가 동작하고 있는 브라우저 위에는 즉 브라우저라는 프로그램 안에서는 여러 가지 쓰레드가 들어 있습니다. 그래서 우리가 브라우저 즉 웹APIs들을 이용하게 되면 멀티쓰레딩이 가능합니다.
JavaScript Engine 구조
Memory Heap: 메모리 할당이 일어나는 곳
Call Starck: 코드 실행에 따라 호출 스택이 순서대로 쌓이는 곳
*브라우저 런타임 환경 이해
Web API : Web API는 브라우저에서 제공되는 API이다. 자바스크립트 엔진에서 정의되지 않았던 setTimeout이나 HTTP 요청(ajax) 메소드, DOM 이벤트 등의 메소드를 지원한다.
Task Queue : 이벤트 발생 후 호출되어야 할 콜백 함수들이 기다리는 공간. 이벤트 루프가 정한 순서대로 줄을 서 있으므로 콜백 큐(Callback Queue) 라고도 한다.
Event Loop : 이벤트 발생 시 호출할 콜백 함수들을 관리하고, 호출된 콜백 함수의 실행 순서를 결정한다.
console.log("시작");
setTimeout(function(){
console.log("3초후 실행");
}, 3000);
console.log("끝");
// 시작
// 끝
// 3초후 실행
먼저 전역 컨텍스트 main() 함수가 Call Stack에 쌓이고 console.log(“시작”) 이 Call Stack에 쌓인다. “시작”이 콘솔에 찍힌다.
console.log(“시작”) 이 리턴되며 Call Stack에서 제거된다.
setTimeout함수가 실행되면서 Call Stack에 setTimeout함수가 들어간다.
setTimeout함수는 자바스크립트 엔진이 처리하지않고 Web API가 처리하므로 Callback함수를 전달하고, setTimeout작업을 요청한다.
Call Stack에서는 setTimeout작업이 제거된다.
console.log(“끝”) 이 호출되어 Call Stack에 쌓인다. “끝”이 콘솔에 찍힌다.
console.log(“끝”) 이 리턴되며 Call Stack에서 제거된다.
main() 함수가 리턴되며 Call Stack에서 제거된다.
Web API는 setTimeout 작업을 실행한다. 3초를 센 후 Task Queue로 Callback 함수를 보낸다.
Event Loop는 Call Stack이 비어있으면 Task Queue에서 함수를 하나씩 꺼내 Call Stack에 넣고 실행한다.
console.log(“3초후 실행”) 이 호출되고 Call Stack에 쌓인다. “3초후 실행”이 콘솔에 찍힌다.
console.log(“3초 후 실행”) 이 리턴되고 Call Stack에서 제거된다. 차레로 Callback 함수도 제거된다. Event Loop는 Task Queue에 콜백 함수가 들어올 때까지 계속 대기한다.
만약 Call Stack에 함수들이 너무 많이 차있으면 3초후 실행되지 않을 수도 있다. Event Loop는 Call Stack이 비어있을 때만 Task Queue의 함수를 Call Stack으로 가져오기 때문이다. 이게 setTimeout() 시간이 정확하지 않을 수도 있는 이유이다.
