웹브라우저의 동작원리 Stack, Queue

우리가 작성하는 자바스크립트는 브라우저가 실행을 시켜준다. 

쉽게 말해 HTML, CSS, JavaScript를 해석해주는 엔진이다.

용어 정리

Heap : 변수들이 저장되는 공간

Stack : 작성한 코드를 실행해 주는 곳 (하나이기 때문에 자바스크립트는 Single thread 라고 한다.)

Queue : 대기끝난 코드를 Stack에 보내는 공간

---

Stack 이라는 공간에는 구현한 코드가 한줄 한줄 쌓인다.

구현한 코드 내에 선언한 변수들은 Heap이라는 공간에 쌓인다. 

Stack은 하나 뿐이기때문에 한 번에 코드 하나밖에 실행할 수 없다.

그래서 자바스크립트는 전문용어로 single threaded 라고도 한다. 병렬처리X

 

setTimeout을 이용해서 체감하기

console.log(1+1);
setTimeout(function(){console.log(2+2);}, 1000)
console.log(3+3);

위의 코드는 Stack에 한줄 한줄 쌓이는데, setTimeout은 stack 에서 대기실(Web API)로 내보낸다.

이벤트리스너, ajax의 경우도 마찬가지. (기다림이 필요한 코드들)

위 코드의 결과

시간을 0으로 바꿔도 대기실로 보내버리기 때문에 같은 결과가 나온다. (1초는 안걸리긴함)

대기가 끝난 코드는 Queue로 보내지고 stack이 비어있는 경우에만 stack으로 보낸다.

자바스크립트는 동기적? 비동기적?

자바스크립트는 원래 동기적으로 처리되는 언어이다.  여기서 동기적이란, 한 번에 한줄씩 실행이 된다는 것이다.

오래걸리는 연산을 실행하면 멈추기도 한다.

하지만 가끔 setTimeout과 같은 처리처럼 WEB AP와 연관딘 특수한 함수를 사용하면 

비동기적인 처리(작업이 오래걸리는 경우 다른 코드부터 실행)도 가능하다.

 

여튼간에 브라우저의 동작원리를 통해 코드 작성할 때 주의해야 할 점은 시간이 오래걸리는 코드를 stack에 넣지 말 것.

일단 비동기 처리로 대기실로 내보내야 하고 대기실에서도 반복과정을 setTimeout으로 나눠서 Queue로 올리면 좋다.

아니면 Web worker를 이용하여 연산과정을 수행한다.