참고문서 : https://zereight.tistory.com/855
이벤트 루프란?
- 이벤트 루프란 무엇인가요? Callback Event Queue에서 하나씩 꺼내서 동작시키는 Loop를 말한다. 자바스크립트는 싱글 스레드 기반 언어이기 때문에, 한번에 하나씩 작업을 진행한다. 그러나 자바스
zereight.tistory.com
참고문서 : https://velog.io/@thms200/Event-Loop-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84
Event Loop (이벤트 루프)
이번 글은 Event Loop (이벤트 루프) 에 대해 정리해보려고 한다. Event Loop? Event Loop 출처 How JavaScript works: an overview of the engine, the runtime, and the call stack Event Loop는 MDN 문서로 검색하면 "큐의 다음 메시
velog.io
개요
js에는 브라우저용 이벤트루프와 노드용 이벤트루프 2가지가 존재합니다.
브라우저용 이벤트루프는 webAPI를 사용하고, 노드용 이벤트루프는 C++엔진을 사용합니다.
해당 글은 크롬의 V8엔진의 webAPI를 기준으로 설명하겠습니다.
heap
사용자가 설정한 변수들의 메모리가 할당된 공간
stack
코드가 실행될 때 쌓이는 곳
callbackqueue
비동기적으로 실행된 콜백함수들의 결과가 모이는 곳
이벤트루프
이벤트루프는 stack(call stack) 이 비었다면 callback queue(task queue) 에서 하나씩 꺼내서 동작시키는 Loop
web API
브라우저에서 자체 지원하는 api
DOM이벤트, AJAX, setTimeout등의 비동기 작업등을 수행한다.
런타임 환경에서 어떻게 비동기 코드 실행방법
JS는 단일쓰레드 환경으로, 한번에 하나씩만 처리할 수 있습니다.
이러한 스펙으로 비동기 코드의 경우 아래와 같이 처리한다.
- 코드가 호출스택에 쌓인 후, 실행되면 자바스크립트 엔진은 비동기 작업을 Web API에게 위임한다.
- Web API는 해당 비동기 작업을 수행하고, 콜백 함수를 이벤트 루프를 통해서 태스트 큐에 넘겨주게된다.
- 이벤트 루프는 콜스택에 쌓여있는 함수가 없을 때, 태스크 큐에서 대기하고 있던 콜백함수를 콜스택으로 넘겨준다.
- 콜스택에 쌓인 콜백함수가 실행되고, 콜스택에서 제거된다.
'Web' 카테고리의 다른 글
| 리액트 네이티브 명령어 (0) | 2022.08.01 |
|---|---|
| this와 binding (0) | 2022.03.19 |
| Scope (0) | 2022.03.19 |
| 웹페이지 동작 원리 & 브라우저 랜더링 과정 (0) | 2022.03.18 |
| Vanilla Javascript 라우터 구현 (0) | 2021.09.27 |
