Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- Node js
- 자료구조
- 정규표현식
- primitive type
- sort
- Native select
- OSI 7계층
- nodejs
- 재귀함수
- 코딩테스트
- 알고리즘
- MUI
- kakao map api
- input class
- 버블정렬
- react js
- 자바스크립트
- 이벤트 루프
- javascript
- 코드스테이츠
- CSS
- 프론트엔드
- JavaScript Deep Dive
- 백준 nodeJS
- next/Image
- 코드스테이츠 메인프로젝트
- 배열
- 백준
- 유데미
- 페이지네이션
Archives
- Today
- Total
신입 개발자에서 시니어 개발자가 되기까지
[Javascript Deep Dive] 42장 이벤트 루프 본문
1. 자바스크립트 엔진
a. 자바스크립트 엔진이란?
- Javascript로 작성한 코드를 해석하고 실행하는 인터프리터이며, 싱글 스레드로 동작한다.
- 싱글 스레드로 동작한다는 것은 한 번에 하나의 태스크만을 처리할 수 있다는 뜻이다.
하지만, 비동기 함수, 애니메이션 등은 다른 코드들과 동시에 동작하는데, 이러한 자바스크립트의
동시성을 처리해주는 것이 브라우저의 이벤트 루프다.
b. 엔진을 이루는 두 영역
i. 콜 스택
- 자바스크립트는 단 하나의 호출 스택(call stack)만을 이용하고, 하나의 함수가 실행되고
종료되어야 다른 task를 수행할 수 있다.
- 함수가 실행되면 콜스택에 push되고 실행이 끝나면 콜스택에서 pop되어 제거된다.
ii. 힙
- 동적으로 생성된 객체는 heap에 할당된다.(이는 변수의 메모리 할당에 대해서 다뤘었다)
2. 브라우저환경
a. 큐
-큐는 비동기 함수나 이벤트 핸들러를 일시적으로 보관하기 위해 브라우저 환경에서 제공하는 영역이다.
i. 마이크로태스크 큐
- promise 후속처리 메서드(then, catch, finally)의 콜백함수를 저장하는 큐
ii. 태스크 큐
- 처리해야하는 태스크를 임시 저장하는 대기 큐가 존재하는데 이를 task Queue라고 부른다.
대표적인 태스크로는 비동기함수 내의 콜백함수다.
setTimeout,setInterval, UI렌더링, requestAnimationFrame 등의 task들이 태스크 큐에 저장된다.
b. 이벤트 루프
-큐와 스택을 번갈아 확인하며 동시에 여러 태스크를 실행하기 위해 브라우저 환경에서 이벤트 루프를 제공한다.
i. 콜 스택에 현재 실행중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수
(콜백 함수, 이벤트 핸들러 등)이 있는지 반복해서 확인한다.
ii. 콜 스택이 비어있고, 태스크 큐에 대기 중인 함수가 있으면 이벤트 루프는 선입선출로
태스크 큐에 있는 함수를 콜 스택으로 이동시킨다.
iii. 우선순위는 마이크로태스크 큐가 태스크 큐보다 높다.
'책읽기 > Javascript Deep Dive' 카테고리의 다른 글
[Javascript Deep Dive] 22장 this(호출 방식에 따른 this 바인딩) (2) | 2022.10.27 |
---|---|
[Javascript Deep Dive] 15장 let, const (0) | 2022.10.03 |
[Javascript Deep Dive] 24장 클로저 (1) | 2022.10.03 |
[Javascript Deep Dive] 13장 스코프 (0) | 2022.10.03 |
[Javascript Deep Dive] 10장 객체 리터럴 (0) | 2022.10.03 |