Event Loop
process -> 컴퓨터위에서, 즉 운영체제 위에서 연속적으로 실행되고 있는 프로그램
Thread -> 한 프로세스 안에서 여러개가 동작할 수 있다
ex) 음악 재생프로그램, 사진 뷰어 프로그램등 각각의 프로세스를 갖이고 있다
Process
Code: 프로그램을 실행하기 위한 code
Stack: 프로세스 안에서 함수들이 어떤순서로 실행되어야 하는지, 예를 들어 작성된 함수가 끝나면 어디로 다시 들어가야 되는지에 대한 정보를 저장한다
Heap: 오프젝트를 생성하거나 데이터를 만들때 그 데이터들이 저장되는 공간
=> 동적으로 할당된 변수들이 저장 된다
Data: 전역변수, static(고정)변수들이 할당 된다
각각의 프로세스는 메모리 위에서 실행 된다, 서로 독립적으로 실행 된다
만약 하나의 process에 문제가 발행하면, 문제가 발생한 process만 죽게 된다
각각의 프로세스는 저마다 자원(resource)들이 정해져 있다
ex) 프로세스마다 할당된 메모리나 데이터들이 저장되어져 있다
=> 각각의 Process는 자기들에게 필요한 code, 동작하고 있는 순서를 기억하는 stack, 데이터들이 들어있는 heap과 data가 포함되어 있다
Thread
- 한 프로세스 안에서 여러개가 동작 할 수 있다
- 각각 저마다 해야되는 업무를 배정 받는다
저마다 필요한 일들을 수행하게 만들고, 자기들만의 수행해야 되는 함수의 호출을 기억해야되기 때문에
- Thread 마다 Stack이 할당 되어져 있다
하지만 이 프로세스 안에서 동작하는 일꾼들은 결국 한 프로그램에서, 프로그램을 위해서 일해야 되므로 프로세스에 지정된 code와 data, heap들을 공통적으로 접근해서 공통적으로 업데이트가 가능하다
=> 동시 다발적으로 발행할 수 있기 때문에 이 프로세스가 조금 더 효율적으로 일을 할 수 있게 도와 준다
Point
Thread는 각각 Stack이 지정되어져 있지만,
data나 code, heap 같은 공통적인 데이터리소스는 프로세스에 있기 때문에, Thread들은 이 프로세스에 공통적으로 할당된 리소스에 동시 다발적으로 접속해서, 업데이트 해야되서 서로 공유하면서 사용 한다
=> Multi Threading 시 주의 해야한다
Multi Threading
한 프로세안에서 여러가지 Thread가 동시다발적으로 일어나는 것
(Multi Thread에 대해서는 나중에 따로 정리해 보자)
- Process는 프로그래밍을 동작하는 최고의 단위
- Thread는 프로그램안에서 동시에 여러개가 수행될 수 있는 작은 일꾼 단위
JAVA-> 언어 자체에서 Multi Thread이 지원된다 -> 각각 프로그래밍을 짤 수 있다, 총 몇개의 Thread가 동시에 동작할 수 있는지 다양한 것들을 할 수 있다
JavaScript -> Single Thread language, Multi Threading이 없다, 하지만 브라우저를 통하여 Multi Threading이 가능하다 -> 브라우저 안에는 여러가지 Thread가 들어있다, Web APIs를 이용하게 되면 Multi Threading이 가능하다
JavaScript가 동작하는 런타임 환경에서, 즉 JavaScript가 동작하는, 동작하고 있는 실행 환경에서는 다양한 방식을 이용해서 약간의 조금의 Multi Threading 같은 효과를 얻을 수가 있다
JavaScript가 실행되는 이 런타임 환경에서는 JavaScript가 싱행되는 실행 환경 위에서는 Multi Threading이 가능하며, 이벤트 루프를 이용해서 다양한 동작을 실행 할 수 있다
Web-Application -> Browser
Js엔진이 작성한 소스코드를 한줄 한줄씩 해석하고 분석하고 실행한다
Memory Heap
- 구조적으로 정리된 자료구조가 아니라 아무곳에 저장되어 있다
- 데이터를 만들때 변수를 선언해서 오브젝트를 할당하거나 문자열이나 숫자를 할당하게 되면,
데터는 전부 메모리 힙에 저장된다
Call Stack
함수를 실행하는 순서에 따라서 차곡차곡 쌓아 놓는 역할을 한다
Call Stack은 함수들이 호출되는 순서를 기억했다가 함수가 끝나면 원래 있던자리로 돌아가기 위해서 쓰이는 자료구조 중 하나다
-> 모든 Process와 Thread 안에는 각각의 저마다 Call Stack이 들어가 있다
-> 일을 수행할때 어디서 왔고 어디로 다시 가야되는지 정보를 기억해야 되기 때문이다
재귀함수
재귀함수는 함수안에서 자기 자신을 계속 부르는 것으로,
Call Stack Size에 대하여 유의 하면서 사용해야 한다
전체적인 자바스크립트 실행 과정
JS엔진 + Web APIs 가 어떤식으로 현력하여 작동하는지 보여준다
이벤트루프 -> Tack Queue와 Callstack을 관찰 한다
Microtask Queue
JS엔진(메모리칩, 콜스텍)
JS 런타임 환경 -> TackQueue -> use APIs에서 등록한 콜백을 특정한 이벤트가 발생하게 되면 Task Queue에 넣어서
-> 이벤트루프라는 것이 계속 체크하면서 Call Stack이 비워져 있을 때 Task Queue에 있는 것을 하나씩 Call Stack으로 가져온다
=> Call Stask에서 수행 중인 것은 끝날때까지 보장 된다
Task Queue는 웹 APIs에서 등록한 콜백함수를 특정이벤트가 발생했을때 Task Queue에 넣는다
Microtask Queue
- promise에 등록된 콜백, 프로세스가 다 수행이 되고 나면, 그 다음에 등록한 then에 등록한 콜백함수, mutation observer(Wep API) 콜백들이 Microtask Queue에 들어온다
- promise와 mutation observer라는 이 두가지의 콜백은 Microtask Queue에 들어온다
Render
주기적으로 Browser에서 요소들을 움직이거나 애니메이션을 할때 주기적으로 화면에 업데이트 해주는 것
-> Browser에서 변형하는 DOM요소를 변형된 것이 브라우저에 표기 되기 위해서는
-> Render Tress가 만들어 져야 되고
-> 레이아웃 크기와 위치들이 계산된 다음
-> paint와 composite 과정을 통하여 Browser에 표기 된다
=> 업데이트 되기 위해서 주기적으로 호출되는 순서
=> Request Animation Frame(Web API)를 부르면 그때 등록한 콜백은 Queue에 callback이 쌓이게 된다
Microtask Queue
이벤트루프가 돌다가 Microtask Queue에 멈추게 되면 queue안에 아이템들이 없을 때까지 기다렸다가, 없어질 때까지 callstack에 보낸다
보내는 중 queue에 아이템이 더 생기면 그것마저도 다 없어질 때까지 기다렸다가 다시 순회 한다
Task Queue
하나씩 callstack으로 넘겨지고 다시 이벤트루프가 순회 한다
Render
Request Animation Frame(callback) -> RenderTree -> Layout -> print -> Browser update
이벤트루프 순회 -> Task Queue의 나머지 콜백은 callstack으로 넘겨준다
requestAnimationFrame()
Browser가 업데이트되기 전에 이 코드를 수행할때 많이 쓰인다
setTimeout()
callstack 안에서 코드블럭이 수행되는 순간 말고, 끝나고 이벤트 루프가 한바퀴 돌때 그 다음에 코드 블럭을 실행 할 때 많이 쓰인다
