용어 사전
호출 스택: 코드가 실행되면 스택 형태로 개별적으로 쌓인다.
. 후입선출(LIFO)
스토리지 힙: 메모리 할당이 이루어지는 곳. (객체와 연관됨)
웹 API: 웹 브라우저에 내장된 브라우저에서 제공하는 API입니다.
예) DOM, Ajax, setTimeout 등
단일 스레드: 한 번에 한 가지만 할 수 있습니다.
예) 자바스크립트
콜백 대기열: 처리할 메시지 목록인 메시지 큐. 선입선출(FIFO)
- 태스크 큐
예) setTimeout - 작업 대기열(마이크로 작업 대기열) 작업 대기열보다 우선 순위가 높습니다.
예: Promise의 .then() - 애니메이션 프레임
예) RequestAnimationFrame API
이벤트 루프(이를 위한 하나의 스레드이지만 비동기일 수 있음)
: 이벤트 루프는 호출 스택에 현재 실행 중인 실행 컨텍스트가 있는지 여부를 결정합니다.
기능이 작업 대기열에 대기 중인지 반복적으로 확인
호출 스택이 비어 있습니까? => Queue에 대기 중인 함수가 있는지 확인한 후 여러 개가 있으면 한 번에 하나씩 호출 스택에 푸시합니다.
동기 대 비동기
동기 부여
– 한 줄씩 실행됩니다.
즉, 현재 실행 중인 코드가 완료될 때까지 다음 코드를 실행할 수 없습니다.
console.log("1");
console.log("2");
console.log("3");
// 출력순서 1 -> 2 -> 3– 위에서 아래로 코드 실행
비동기
– 코드가 순서 없이 실행되며, 실행 중인 코드가 아직 완료되지 않았음에도 불구하고 다음 코드가 실행됩니다.
console.log("1);
setTimeout(() => {
console.log("2");
}, 0);
console.log("3");
// 이 아래로 수백줄의 코드가 있다해도 setTimeout이 가장 나중에 실행이번에는 1, 2, 3의 순서로 출력될 것으로 예상하셨겠지만 1, 3, 2가 출력됩니다.
왜? setTimeout은 비동기 함수(API)이기 때문입니다.
동작 원리
setTimeout()이 호출되면 호출 스택으로 이동하고 지정된 시간(초)이 경과한 후 작업 큐로 이동하여 다른 모든 동기 코드가 실행될 때까지 기다립니다.
=> 콜 스택이 비어 있을 때 이벤트 루프는 태스크 큐에서 콜 스택으로 콜백 함수를 푸시합니다.
요약
동기 부여 : 코드는 간단하고 직관적일 수 있지만 결과가 반환될 때까지 아무것도 하지 않고 기다려야 합니다.
비동기 : 코드가 직관적이지 않아 복잡하지만 결과가 반환되기 전까지 다른 작업을 수행할 수 있으므로 효율적으로 사용할 수 있습니다.
JS 작동 방식
JS를 실행하려면 JS 엔진이 필요합니다.
V8, Rhinom SpiderMonkey 등 다양한 JS 엔진이 있지만 가장 대표적인 것이 구글의 V8 엔진이다.
모터는 위의 핸들과 같이 두 가지 구성 요소로 구성됩니다.
메모리 힙은 메모리 할당이 일어나는 곳이고 호출 스택은 코드 실행에 따라 스택이 하나씩 쌓이는 곳이다.
JS를 사용하는 경우 setTimeout()과 같은 수많은 API를 사용하십시오. 이러한 API를 웹 API라고 하며 웹 브라우저 또는 node.js와 같은 JS 런타임에서 지원하는 API입니다.
따라서 일부 브라우저에서는 지원하지 않을 수 있습니다.
JS는 위에 표시된 setTimeout()과 같은 비동기 코드를 작성할 수 있지만 JavaScript 자체에는 비동기 코드를 처리하는 개념이 없습니다.
그러나 비동기 처리는 어떻게 작동합니까? 빨리 이벤트 루프 및 콜백 큐 감사해요.
웹 API 외에도 웹 브라우저 또는 런타임 이벤트 루프 및 콜백 큐도 지원됩니다.
그렇습니다
코드가 실행되면 호출 스택에 쌓입니다.
그 아래에서 비동기 함수는 처리를 위해 Web API로 전송됩니다.
웹 API에서 작업을 마친 비동기 함수는 콜백 대기열로 전달됩니다.
여기에서 이벤트 루프가 콜 스택이 비어 있는지 확인하면 콜백 큐의 비동기 함수를 콜 스택으로 푸시합니다(우선 순위: 작업 큐 다음에 작업 큐가 있음). 그런 다음 호출 스택에서 비동기 함수가 실행됩니다.
JS는 단일 스레드인데 어떻게 비동기식일 수 있나요???
이벤트 루프 왜냐하면.
작업 대기열과 작업 대기열(마이크로태스크 대기열)은 작업 대기열보다 우선 순위가 높습니다.
따라서 이벤트 루프는 호출 스택이 비어 있음을 확인한 후 작업 큐의 기능을 호출 스택에 순차적으로 푸시합니다.
다음은 태스크 큐입니다.
약속하다
기본형
const promise = new Promise(function (resolve, reject) {
if() {
resolve("성공");
}
else {
reject("error");
}
});| 약속의 상태 | 의미 | 상태 변경 조건 |
| 보류 중 | 비동기 처리가 아직 발생하지 않았습니다. |
약속을 한 직후 |
| 이행 | 비동기 처리 수행(성공) | 해상도 함수 호출 |
| 거부 | 비동기 처리 수행(실패) | 거부 기능 호출 |
후속 방법으로 .then .catch .finally 있다
후속 처리 메서드는 항상 약속을 반환합니다.