Event Loop

자바스크립트는 싱글쓰레드기반 언어이기때문에 한번에 여러작업을 처리할 수 없습니다. 하지만 실제로 웹 애플리케이션에서는 동시에 여러가지작업을할 수 있는 것처럼 느껴진다. 이처럽 자바스크립트를 동시성을 지원하는 것이 바로 브라우저에서 지원하는 이벤트루프입니다.(node.js 런타임환경에서도 동시성을 지원해서 비동기가 가능하다).

Process란?

운영체제에서 CPU자원을 할당받는 작업의 단위입니다. 메모리에 올라와서 실행되고 있는 프로그램의 인스턴스를 의미합니다.

예를들어 음악플레이어나, 사진프리뷰어 등등이 각각의 프로세스를 가지고 있다. 서로 독립적으로 실행된다.

Process 구조:

• Code: 프로세스를 구동하기 위한 코드들들이 담겨져있다.
• Stack: 프로세스에 담겨져있는 함수들이 어떤 순서로 실행이 되어야 하는지 끝나면 어떤식으로 다시 돌아가야하는지에 대한 정보가 저장되어있다.
• Heap: 동적으로 데이터나 오브젝트가 생성이 될 때 저장되는 공간.
• Data: 전역변수, static 변수들이 저장되어 있다.

Thread란?

쓰레드는 한 프로세스 안에서 여러개가 동작이 가능하다. 각각 저마다 해야 되는 업무를 배정 받는다.

쓰레드는 자기들만의 수행해야 되는 함수들을 기억해야하기 때문에 쓰레드마다 Stack만 따로 할당 받고 Code, Data, Heap 영역은 공유합니다. 한 프로세스안에 여러개의 스레드가 담겨져 있으면 동시다발 적으로 여러개의 일을 처리 할 수 있게됨 노래들으면서 글 읽으면서 댓글쓰기 등등 여러가지 일을 동시에 수행이 가능함.

멀티 스레드 장점:

티 스레드가 가지는 장점은 첫 번째로 프로세스를 생성하여 자원을 할당하는 시스템 콜이 감소하므로 자원을 효율적으로 관리할 수 있고, 스레드 간의 통신 비용이 더 적게 발생합니다. 대신,

스레드 간에 공유자원으로 인한 문제를 위해 동기화에 대해서 신경을 써줘야 합니다.

자바스크립트 런타임 환경은 간단하게 이렇게 생겼다.

자바스크립트 엔진:

여기서 memory Heap 과 call Stack 이 담겨져있는 컨테이너는 자바스크립트 엔진이다.

자바스크립트 엔진에서는 크게 Memory Heap 과 Call Stack 등이 있습니다.

• Memory Heap: 우리가 데이터를 만들때 , 변수를 선언해서 오브젝트를 할당하거나 문자, 숫자등등 을 Memory Heap에 저장이 되어집니다. 메모리 힙은 구조적으로 정리된 자료구조가 아니라 여기저기 흝어져서 저장이 되어있다.
• Call Stack: 실행하는 함수에 따라서 쌓이는 공간이다. LIFO 구조

Web API s:

브라우저에서 제공하는 api 브라우저의 멀티 쓰레딩 을 이용한 다양한 일들을 동시에 실행이 가능하게 만든다.DOM, Ajax,Timeout 등이 있다. Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백함수를 Callback Queue(Task Queue) 에 밀어 넣는다.

Callback Queue(Task Queue)

비동기적으로 실행된 콜백함수가 보관 되는 영역이다.예를 들어 setTimeout에서 타이머 완료 후 실행되는 함수(1st 인자),addEventListener에서 click 이벤트가 발생했을 때 실행되는 함수(2nd 인자) 등이 보관된다.

Event Loop:

Event Loop는 Call Stack과 Callback Queue의 상태를 체크하여,

Call Stack 이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어넣는다.

마이크로 태스크 큐 안에있는 모든 콜백을 호출해서 큐가 빌때까지 callstack에 넣어서 실행한다.

이러한 행위를 브라우저가 종료될때까지 계속진행이 된다.

Microtask Queue:

마이크로 태스크 큐는 프로미스에 등록된 콜백 즉 프로미스가 다 실행이 되고나면 그 다음에 then 등록한 콜백함수 ,그리고 mutation observer 웹 API 들어있는 콜백 들이 마이크로 태스크 큐에 담긴다.

Render

주기적으로 Render 부분을 호출한다 Request Animation Frame 의 콜백함수들이 해당 큐에 쌓인다 ⇒ Render Tree⇒Layout⇒paint⇒composite 과정을 걸치면서 브라우저 화면을 다시 그려준다.