event-loop

김_리트리버·2021년 5월 27일
0

Web

목록 보기
3/5

process VS 쓰레드

Process

= 운영체제 위에서 연속적으로 실행되고 있는 프로그램

= 운영체제 위에서 독립적으로 메모리에서 실행되고 있는 프로그램

크롬 → 프로세스 1개

notion → 프로세스 1개

slack → 프로세스 1개

서로 독립적으로 실행되고 있음

프로세스 안에는 code, callstack, heap, data 가 있다.

thread

정의 = 프로세스 내에서 실행되는 흐름의 단위

사용하는 이유 = 다양한 일들을 동시에 하기 위해서 사용

한 Process 안에서 여러개가 동작할 수 있다.

각 thread 마다 stack 이 있다.

게임을 예로 들면 배경음악을 재생하는 thread 가 있고

몬스터를 생성하는 thread 가 있고 몬스터를 사냥했을 때 서버와 통신하는 thread 가 있을 수 있다.

javascript engine

자바스크립트 엔진에는 memory Heap 과 Call stack 이 있다.

변수,배열,객체 등을 선언하면 전부 memory heap 에 저장된다.

javascript runtime 환경

Web API 에 할당한 콜백함수가 실행되는 원리

event-loop 가 call stack 과 task-queue, micro task queue 를 계속관찰한다.

call stack 이 빌때 까지 기다렸다가 call stack 이 비면 micro task queue 에 있는 콜백함수를

stack 에 올린다. 이후 다시 stack 이 비면 task-queue 에 있는 콜백을 stack 에 올린다.

render

dom 을 변경시키거나 위치를 이동시킬 때 화면에 업데이트 시켜줌

cf > request animation frame

등록해 놓은 콜백을 브라우저가 화면을 update 하기전에 실행시킴

micro task queue

promise 가 다 수행이 되고 나면 실행되는 then 에 등록된 콜백함수

task queue

setTimeout, setInterval 에 넣은 콜백함수, addEventListener 에 넣은 콜백함수

이벤트 루프가 queue 를 관리하는 방법

stack 과 render, micro task queue,task queue 를 계속 반복하며 확인함

stack 이 비면 render, micro task queue,task queue 순으로 stack 에 함수를 올림

addEventListener 에 등록한 함수는 해당 이벤트가 발생하면 task queue 에 보내짐

task queue

  • queue 에 등록된 콜백함수를 event-loop 한 번 돌때 마다 한개씩 call-stack 에 올림

micro task queue ( promise )

  • queue 가 다 빌때 까지 안에 있는 콜백을 stack 에 올린 다음 event-loop 진행
profile
web-developer

0개의 댓글