웹 브라우저란?
서버에서 받아온 HTML, CSS, JS 를 실행시켜주는 프로그램이다.
근데 브라우저가 자바스크립트를 실행하는 일련의 과정이있다. 먼저 브라우저는 C++ 코드로 짜여져있으며, 브라우저는 실행해야할 자바스크립트 코드를 발견하면 C++로 만든 Stack에 넣어둔다.
처리가 오래 걸리는 코드를 만난다면?
서버로의 ajax요청, 이벤트리스너, setTimeout과 같은 코드들은 처리하기까지 시간이 오래 걸린다.
(버튼 이벤트리스너는 사용자가 버튼을 누르기 전까지 기다림...)
그래서 이렇게 시간이 오래 걸리는 코드들은 Stack에 쌓아서 처리하지 않고 잠시 보류해놨다가 완료되는 시점에 Stack으로 올려보낸다. 올려보낼 때는 Stack에 아무것도 없이 비어있어야하며 차례대로 올려준다.
Stack을 바쁘게 만들면 안된다
Stack을 바쁘게 만들면 ajax 요청, 이벤트 리스너, setTimeout 이러한 코드 실행이 불가하다.
for 반복문을 코드에서 1억번 돌린다면...?? 10초 걸린다면 10초동안 ajax, 이벤트리스너 이런 녀석들은 실행하지 못한다.
왜냐? Stack이 10초동안 비어있지 않기 때문이다.
따라서, Stack을 바쁘게하면 안된다.
예시.1억번 돌리는 코드
for (let i = 0; i < 1e10; i++) {
i++;
}그러면 어떻게 10억번을 돌릴 수 있을까?
setTimer를 이용해볼수도 있다. 0초마다 0~1000번, 1000~2000번 반복하면 0초마다 Task Queue로 보내지기 때문에 그 사이사이에 이벤트리스너 같은 코드들을 실행시킬 수 있다.
setTimer를 0초로 설정해도 약 실제로는 4ms로 동작됨.
참고영상
