Portfolio

이벤트 루프(Event Loop)란?

JavaScript의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있으며, C 또는 Java 등 다른 언어가 가진 모델과는 상당히 다릅니다. -MDN- JavaScript 런타임은 JavaScript 코드가 실행되는 환경입니다. 여기에는 JavaScript 엔진, 메모리 힙 및 호출 스택이 포함됩니다.


function foo(b) {
  let a = 10
  return a + b + 11
}

function bar(x) {
  let y = 3
  return foo(x * y)
}

const baz = bar(7) // 42를 baz에 할당

bar가 반환하면, 스택이 빕니다. 인수와 지역 변수는 스택 바깥에 저장되므로 바깥 함수가 반환한 후에도 계속 존재할 수 있습니다. 중첩 함수에서 지역 변수에 접근할 수 있는 이유가 이것입니다.

4. 힙?

힙은 단순히 메모리의 큰 (그리고 대부분 구조화되지 않은) 영역을 지칭하는 용어입니다.

FYI) 여기서 궁금한게 생긴다. Javascript의 배열은 크기를 미리 선언하지 않아도 되는데, 얼마나 커질 줄 알고 heap에 미리 메모리를 잡는걸까?

Javascript배열은 일반적인 밀집 배열이 아니라 희소 배열이다. 메모리 주소가 이어지는 밀집 배열이 아니고 해시 테이블로 구현된 객체의 형태이다. 그래서 탐색은 느릴 수 있어도 삽입, 삭제의 기능은 빠르다.

작업이 끝날동안 CallStack에 block이 일어나서 아무것도 못하게 될거임.

그래서 비동기로 동작한다. 이때 web API들을 사용해서 효과적으로 동작을 처리할 수 있다.

V8(자바스크립트엔진)소스코드에는 setTimeout, DOM, HTTP 요청 관리 같은 코드들은 없다. 얘들은 다 webAPI 라서 V8엔진 외부에서 다른 언어로 브라우저에서 실행된다.

개발할 때 setTimeout 함수 썻었는데..?

setTimeout의 경우 브라우저 자체의 일부는 아니지만 브라우저가 제공하는 WebAPIs의 일부로, Javascript를 사용하여 구현할 수 있다.

eventloop는 어디에 존재할까?

event 루프는 V8엔진의 일부이다.

그렇다면 callback Queue는?

요약하면 작업 대기열은 V8 JavaScript 엔진의 필수 부분이며 비차단 방식으로 JavaScript 코드 실행을 관리하는 데 사용됩니다.

코드를 읽는다

callStack에 push 된다.

WebAPIs 요청이면 요청을 수행한다. (이때 callstack에서 pop된다)

WebAPIs 작업이 끝나면 Callbackqueue에 쌓인다.

callstack이 비어있다면 eventloop에 의해서 callbackqueue에 push 된다.


console.log('Hi');

setTimeout(function cb() {
	console.log('there');
}, 0);

console.log('JSConfEn');

순서를 제어할 순 있겠군?

0ms의 대기시간을 갖는 setTimeout가 10억개라면?


console.log('Hi');

while(10억 -- ) {
	setTimeout(function cb() {
		console.log('there');
	}, 0);
}

console.log('JSConfEn');

setTimeout은 최소 딜레이만 보장할 수 있다.

매우 많은 양의 이벤트가 발생한다면?

브라우저는 매 16.6ms 마다, 즉 1초에 60프레임을 repaint하는게 젤 이상적이라고 한다. 그런데 stack에 무언가 있으면 이 동작에 영향을 받는다. render queue 역시 stack이 비어있어야 task를 stack에 넣어 줄 수 있기 때문이다.