1. 콜 스택

참조

Call Stack — MDN 100%

조항

Understanding Javascript Call Stack, Event Loops — Gaurav Pandvia 100%

Understanding the JavaScript Call Stack — Charles Freeborn 100%

Javascript: What Is The Execution Context? What Is The Call Stack? — Valentino Gagliardi 50%

What is the JS Event Loop and Call Stack? — Jess Telford 100%

Understanding Execution Context and Execution Stack in Javascript — Sukhjinder Arora 0%

How JavaScript Works: An Overview of the Engine, the Runtime, and the Call Stack — Alexander Zlatkov 100%

The Ultimate Guide to Execution Contexts, Hoisting, Scopes, and Closures in JavaScript — Tyler McGinnis 50%

100%

정의

인터프리터가 호출된 기능을 추적하는 메커니즘 또는 구조

스크립트 호출 기능

인터프리터는 함수의 실행 컨텍스트를 호출 스택에 추가하고 함수 실행을 시작합니다.

함수 실행이 완료되었습니다

인터프리터는 호출 스택에서 함수의 실행 컨텍스트를 제거하고 왼쪽에서 실행을 재개합니다.

스택은 할당된 것보다 더 많은 공간을 차지합니다.

"스택 오버플로"

실행 컨텍스트란 무엇입니까?

실행 컨텍스트는 코드가 실행되는 환경의 추상적인 개념입니다. 다음은 실행 컨텍스트에 대한 가이드입니다.

예시

function greeting() { 
    sayHi(); // 
}

function sayHi() { 
    return 'Hi';
}
greeting(); // 

코드가 greeting(); 에 도달하면 인사말 함수의 실행 컨텍스트가 호출 스택에 추가됩니다.

인사말 기능의 모든 라인을 실행합니다. 코드가 sayHi(); 에 도달하면 sayHi 함수의 실행 컨텍스트가 호출 스택에 추가됩니다.

sayHi 함수의 모든 라인을 실행합니다. 종료되면 sayHi 함수를 호출한 행으로 실행을 반환하고 인사말 함수에서 나머지를 계속 실행합니다. Call Stack에서 sayHi 함수의 실행 컨텍스트를 제거합니다.

인사말 기능의 모든 라인을 실행합니다. 끝나면 인사말 함수를 호출한 줄로 실행을 반환하고 나머지 코드를 실행합니다. 호출 스택에서 인사말 함수의 실행 컨텍스트를 제거합니다.

콜 스택의 특징

밀린 쪽이 나중에 보듯이 먼저 나갑니다. 예를 들어, sayHi 기능은 인사말 기능보다 나중에 추가되었지만 먼저 제거되었습니다. 우리는 그것을 LIFO(후입선출)라고 부릅니다.

또한 Call Stack은 데이터를 임시로 저장하기 위한 것입니다. 함수 실행이 완료되면 호출 스택이 비게 됩니다.

또한 모든 실행 컨텍스트가 순서대로 추가되고 순서대로 실행됩니다. 그래서 우리는 호출 스택이 동기식이라고 말합니다.

자바스크립트 엔진

정의

자바스크립트 코드를 실행하는 프로그램. Chrome의 V8 Engine, node.js, electron은 JS 엔진 중 하나입니다. V8 엔진은 고성능의 오픈 소스 자바스크립트 및 웹 어셈블리 엔진입니다.



JS Engine은 Memory Heap과 Call Stack으로 구성되어 있습니다. 우리는 Call Stack에 대해 배웠습니다. 그렇다면 메모리 힙은 무엇입니까?

메모리 힙

메모리 힙은 변수 및 개체의 메모리 할당에 사용되는 비정형 메모리입니다.

JS 런타임

정의

자바스크립트 프로그램이 실행되는 환경

동시성이 필요한 이유는 무엇입니까?

호출 스택이 실행할 기능으로 남아 있을 때 브라우저는 실제로 아무 것도 할 수 없으며 이를 차단이라고 합니다. 그래서,

호출된 함수에 엄청난 시간이 걸리면 오랫동안 멈춥니다.

스택이 너무 많으면 브라우저가 오랫동안 사용자에게 응답하지 않습니다.

두 경우 모두 사용자 경험을 감소시킵니다.

웹 API

DOM 이벤트, http 요청, setTImeout 등과 같은 비동기 이벤트를 처리합니다. JS 엔진이 아닌 브라우저에서 생성됩니다. Web API는 실행이 완료되면 콜백 큐에 콜백을 푸시합니다.

콜백 대기열

처리되고 콜백 함수에 연결될 메시지 목록

이벤트 루프

그렇다면 Callback Queue의 함수가 실행될 시기를 누가 선택합니까? 이벤트 루프가 그렇습니다. 이벤트는 호출 스택과 콜백 큐를 모두 반복하고 스택이 완전히 비어 있을 때 큐의 첫 번째 항목을 스택으로 푸시합니다.