일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- web server vs was
- 선형리스트
- express request body
- Call stack
- client side rendering
- 자료구조
- task queue
- javascript eventloop
- DOM API
- 자료구조 queue
- redux 특징
- centos7 설치
- javascript first class citizen
- react event bind
- redux 사용 이유
- es6 module
- 일급 객체
- 자료구조 정렬
- server side rendering
- 순차리스트
- typescript parcel tilde
- javascript module
- Browser API
- parcel resolver error
- request body undefined
- first class citizen
- parcel
- react
- Event Loop
- body-parser
Archives
- Today
- Total
비실이의 개발 성장기
javascript 이벤트 루프 / 태스크 큐 / 콜 스택 알아보기 본문
# 이벤트 루프(event loop)
-
이벤트 루프는 구현방식으로 인해 붙여진 이름이며, 이벤트 루프는 보통 아래 코드와 유사합니다.
while(queue.waitForMessage()) {
queue.processNextMessage();
}
-
이벤트 루프는 javascript 실행환경인 브라우저에서 관리합니다.
# 이벤트 루프 동작방식
-
비어있는 태스크 큐에 1개의 태스크가 들어온 경우, 이벤트 루프에 의해 태스크가 큐에서 pop 됩니다.
-
pop 된 태스크가 실행되면 javascript engine 에 의해 실행 가능한 코드범위로 실행 컨텍스트가 생성됩니다.
-
생성된 실행 컨텍스트는 콜 스택(Call Stack) 에 push 되고 실행됩니다.
-
코드 실행과정에서 생성되는 태스크는 태스큐 큐에 push 됩니다.
-
-
코드 실행이 완료되면 실행 컨텍스트는 콜 스택에서 pop 되고, 콜 스택이 비어지면 이벤트 루프는 태스크 큐를 확인하여 실행할 태스크가 있는지 확인합니다.
-
1 ~ 4 과정을 계속 반복합니다.
# 태스크 큐(Task Queue)
-
태스크 큐는 생성된 태스크가 적재되는 큐 입니다.
-
태스크 큐는 javascript 실행환경인 브라우저에 위치합니다.
-
태스크는 Web API 를 사용하는 경우 생성됩니다.
-
대표적인 Web API 에는 Window, Document, Event, XMLHttpRequest, Fetch 가 있습니다.
-
# 콜 스택(Call Stack)
-
실행 컨텍스트가 적재되는 스택 입니다.
-
콜 스택은 javascript engine 에 위치합니다.
-
js 예제코드를 통한 콜 스택 설명은 '실행 컨텍스트 정리' 포스팅 글에서 확인 가능합니다.
# 참고문서 및 영상
'프론트엔드 > javascript' 카테고리의 다른 글
javascript ES6 모듈(Module) (1199) | 2020.06.20 |
---|---|
호이스팅(Hoisting) 정리 (1177) | 2019.03.03 |
실행 컨텍스트 (Execution context) 정리 (1120) | 2019.03.03 |
일급 객체 (First-class citizen) (1098) | 2018.11.06 |
[javascript] 모듈 사용방식과 번들러 사용 이유 (1179) | 2018.05.26 |
Comments