js runtime environment
자바스크립트 런타임환경이란 말그대로 자바스크립트 언어가 실행되는 환경을 의미한다.
- js 엔진, Web APIs, queue로 구성되어 있다.
프로세스
프로세스란 운영체제 위에서 실행되는 프로그램들을 말한다.
- 프로세스는 서로 독립적으로 실행되기 때문에 서로간에 영향을 주지 않는다.
- 우리가 유튜브에서 음악을 들으면서 게임을 할 수 있는 것이 각각의 프로세스가 독립적으로 실행되기 때문이다.
- 프로세스에는 크게 code, stack, heap, data가 있다.
- code : 프로세스가 실행되도록 하는 코드
- stack: 함수의 호출과 관련된 임시 데이터들을 저장하는 영역
- heap: 객체와 관련된 동적 데이터들을 저장하는 영역
- data: 정적 데이터들을 저장하는 영역
스레드
스레드는 프로세스 안에서 자신만의 호출되어야하는 함수를 받는 stack을 가지고 존재하며 역할에 따라 1개 이상 존재 할 수 있다.
- 스레드들은 process안에서 동작하므로 code,data,heap들을 공통적으로 접근한다.
- 스레드는 동시다발적으로 실행(멀티 스레드)된다는 장점이 있다.
- 그러나 자바스크립트 언어는 싱글 스레드로 동작하기 때문에 Web APIs로멀티 스레드가 가능한 브라우저의 도움을 받을 수 있다.
javascript engine
js 엔진에는 크게 memory heap과 call stack이 있다.
- memory heap에는 선언된 변수들(참조타입)이 저장된다.
- call stack에는 함수의 실행순서를 관리한다.
WEB APIs와 JS Engine의 상호작용
WEB APIs는 대표적으로 DOM API,eventListenr, setTimeout, fetch ,ajax등이 있다.
코드📄
<body>
<button>Continue with SetTimeout</button>
<script>
const btn =document.querySelector('button');
btn.addEventListener('click',()=>{
handleClick();
})
function handleClick(){
console.log('handleClick');
setTimeout(()=>{
console.log('setTimeout');
},1000);
}
</script>
</body>상호작용 순서
- 버튼을 클릭하면 익명의 콜백함수가 테스크 큐에 들어간다.
- event loop에 의해 콜스택이 비어있는것을 확인하고 콜스택으로 들어간다.
- handleClick함수가 호출되어 콜스택으로 들어간다.
- setTimeout 함수가 호출되어 지정된 시간이후 콜백함수가 테스크 큐에 들어간다.
- 콜스택이 비워진것이 확인되면 setTimeout의 콜백함수가 콜스택으로 들어간다.
Event loop
이벤트 루프는 계속해서 자바스크립트 런타임 환경을 돌면서 콜스택과 테스크큐를 계속해서 감시하고 콜스택이 자리가 나면 테스크 큐에게 알린다.
- 📍 이벤트 루프의 현재 위치 지점을 정확하게 파악하는 것이 중요하다.
Event loop의 특징
-
js runtime environment의 queue에는 task queue외에도 microtask queue, Render안에 RAF(request Animation Frame)의 queue)로 구성되어 있다.
- mircotask queue: promise의 then이 받는 콜백함수, mutation observer 콜백함수를 받는 queue
- Render: 브라우저의 render tree를 만들고 layout, paint해주는 과정
-
event loop는 보통 1ms의 속도로 런타임 환경을 순회하고 브라우저는 contents를 60fps(16.7ms)의 속도로 보여준다.
-
따라서 event loop는 순회할 때마다 render로 가서 코드들을 업그레이드 해줄 필요가 없이 종종 업그레이드가 필요할 때만 들린다.
js runtime environment의 queue들
task queue
- event loop가 순회하다 task queue에 오면 task queue는 콜스택으로 한번에 한개의 함수만 보내고 event loop는 콜스택으로 이동하였다가 콜스택이 비워지면 다시 순회한다.
mircotask queue
- event loop가 순회하다 microtask queue에 오면 event loop는 queue안에 함수들이 더이상 생기지 않을 때까지 기다리다 queue가 비워질 때까지 한개씩 콜스택으로 보내고 queue가 비워지면 event loop는 콜스택으로 이동하고 콜스택이 비워지면 다시 순회한다.
request Animation Frame(RAF) queue
- RAF의 queue는 requestAnimationFrame 함수의 콜백함수가 들어오며 가장 최근에 들어온 콜백함수가 브라우저에 영향을 미친다.
btn.addEventListener('click',()=>{
requestAnimationFrame(()=>{
document.body.style.backgroundColor="red";
}),
requestAnimationFrame(()=>{
document.body.style.backgroundColor="blue";
}),
requestAnimationFrame(()=>{
document.body.style.backgroundColor="orange";
}),
})- body의 배경색은 orange로 결정된다.
주의📌
콜백함수안에 반복되는(반복문, 재귀함수)것들을 사용하면 브라우저가 죽을 수 있으므로 주의해야한다.
코드📄
btn.addEventListener('click',()=>{
while(true){
// repeat error!
}
})코드📄
학습 기록.