자바스크립트 동작원리 stack, queue

자바스크립트를 작성하면

크롬, 사파리, 파이어팍스,,,같은 웹브라우저가 실행을 시킨다. 

html, css, js를 해석해 주는 엔진이 바로 브라우저 

브라우저는 js를 해석하는 순서가 다른 언어와 다르다. 

 

다른 언어들은 코드 쓴 순서대로 실행이 되지만 

자바스크립트는 먼저 끝나는 것부터 결과가 나온다. 

그 브라우저 동작원리에 대해 알아보자.

 

브라우저 동작원리 

1. stack

브라우저가 js를 해석하는 단계가 있다.

stack : 명령어 모아서 실행. 한 군데 밖에 없어서 한번에 한 줄밖에 실행을 못한다 (single threaded language)

heap: 변수는 따로 저장해서 stack이 물어보면 알려줌

 

대기실로 보내지는 명령어

여기서 setTimeout같은 명령어는 기다렸다 실행해야하므로 stack에 있지 않고 대기실로 옮겨서 기다리게 한다.

대기실로 보내는 명령어는 정해져 있다. 

Ajax 요청코드관련 - 서버한테 데이터 받아오는 코드, 시간 걸리니까

eventListener- 이벤트 들어와야 실행하니까 대기실로 옮겨짐 

setTimeout- 지정 시간 기다리기. 대기시간을 0으로해도

이 명령어 받으면 바로 대기실로 옮겨지기에

밑에 있는 명령어가 먼저 실행될 것이다. 

 

2. queue

대기실에서 대기가 끝난 명령어들은

바로 stack으로 가지않고 queue로 이동시킨다.

Queue에는 대기끝난 코드들이 줄서서 기다리고 있는다.

Queue에 있는 명령어들이 대기 끝나면 순서대로 stack으로 옮겨진다.

단 stack이 비어있을 때만. 

queue는 상황봐서 stack 비었을 때 하나씩 명령어를 올려준다. 

 

코드 짤 때 주의할 점

그래서 만약 for 반복문으로 10초 걸리는 연산을 시켜놓고 

이벤트리스너도 실행시켜서 alert띄워달라고 하면 

이 alert는 이 연산 끝날때까지 실행이 되지 않는다. 

왜냐하면 stack안에서는 연산이 돌아가고 있고

eventListener는 대기실 거쳐 queue거쳐서

stack의 연산이 비어있을 때까지 기다리기 때문이다. 

그래서 연산 오래 걸리는 것은 자바스크립트로 쓰지말 것!

 

stack을 바쁘게 하면 안된다. 

queue를 바쁘게 하지 안된다. 

 

동기, 비동기 처리 

자바스크립트는 둘 다 된다.

한 번에 한 줄 순서대로 실행하니까 동기적으로 처리된다. 

하지만 eventListener, setTimeout, ajax 함수 쓰면

비동기적 처리도 가능하다 

 

 

 

--- 출처 ---

https://youtu.be/v67LloZ1ieI