: 서버에서 받아온 HTML, CSS, JS를 실행시켜주는 프로그램.
2를 출력하고 1초 후에 4를 출력함.
2를 출력하고 4가 출력되기 전에 6이 먼저 출력됨.
-> 코드의 위치와 관계없이 빠른 것부터 실행됨.
Stack : 코드를 맨 윗줄부터 하나하나 실행시키는 공간
하나 밖에 없기 때문에 코드를 한 줄씩만 실행할 수 있음.
-> 이 때문에 자바스크립트는 보통 single threaded
라고 함.
변수를 만나면 채우기 위해 Heap에서 변수의 값을 찾음.
(처리 시간이 오래 걸리는) 바로 실행할 수 없는 코드는 대기실(Web API)로 보냄.
-> 대기실 보내는 코드들 : Ajax 요청 코드(서버에서 데이터 받아오는 코드), 이벤트리스너, setTimeout(0초로 해도 무조건 대기실로 감)
Heap : 변수가 저장되어 있는 공간
Queue : 대기실에서 다시 stack으로 보내기 전, 대기가 끝난 코드들을 모아둔 공간
코드를 stack으로 하나씩 올려보냄.
⭐️ 중요: stack이 비어있을 때만 올려보냄.
이유 : 계산하는 동안 (처리 시간이 오래 걸리는)다른 코드들이 실행되지 않음. 계산을 하느라 stack이 비워지지 않아서 대기실에서 계속 있기 때문.
-> 브라우저가 멈추거나 하얗게 변하게 되는 결과를 초래함.
-> browser freezing
의 원인이 되기도 함.
1. stack을 바쁘게 만들면 안된다.
- 원인 : 너무 복잡한 계산이나 반복문
2. queue를 바쁘게 만들면 안된다.
- 원인 : 하나의 버튼에 여러 이벤트리스너를 넣는 경우