자바 스크립트 동작 원리

여러분들이 짠 자바스크립트는 크롬 웹 브라우저가 실행 해주기 때문에 웹 브라우저의 동작 원리를 알아볼 필요가 있다.

 

html css javascript 를 해석해 주는 엔진이 브라우저 이다 단, 브라우저는 자바스크립트를 해석하는 순서가 이상하다.

 

예를 들어, 1+1 구문을 실행하고 1초 쉬고 2+2 구문을 실행하고 싶을 때, 자바스크립트는 이런식으로 실행 된다.

 

console.log(1+1) ---- 1

setTimeout(function() {console.log(2+2)}, 1000) ---- 1초 쉬고 실행

console.log(3+3) ---- 2

 

그 이유는 웹 브라우저 내부에서

 

Stack은 1개 밖에 존재하지 않고 변수가 있는 문장이 들어오면 Heap 에서 변수를 찾아서 해당 값을 가져다 쓰는 방식을 사용한다. Stack 에서 코드를 실행해주는데 웹 브라우저 내부에 Stack은 여러개가 없고 하나밖에 없는 것이 특징이다.

 

setTimeout 같은 코드는 바로 실행할 수 있는 코드가 아니기 때문에 (처리가 오래 걸리는 코드들은) 잠깐 미뤄두고 코드를 실행하기 때문에 위와 같은 결과가 나온다.

 

잠깐 미뤄두는 코드들을 알아보자면, 

Ajax 요청 코드

이벤트 리스너

setTimeout 등 여러가지가 있다.

 

위 코드에서 setTimeout 처럼 대기가 끝난 코드들 (처리가 완료된) 을 Stack으로 다시 옮겨 와야하는데 그냥 옮겨 오는 곳이 아니라 Call Back Queue, Event Queue 라고 부르는 Queue 에 대기가 끝난 코드들을 줄을 세워서 Stack으로 하나씩 올려보내게 된다. (* 단, Stack이 텅 비었을 때만 올려보내게 된다.)

 

그렇기 때문에 오래 걸리는 연산 같은 경우 JavaScript로 짜면 효율성이 안좋다.

그 이유는 Stack에서 연산이 끝날 때 까지 코드 처리가 진행되는 동안에 즉, Stack이 비어있지 않기 때문에 (버튼 클릭(이벤트 리스너), Ajax, setTimeout 타이머)가 동작하기 않기 때문이다.

 

1. Stack을 바쁘게 만들지 마라

 

2. Queue를 바쁘게 만들지 마라 (버튼 하나를 누를 때 Queue에 여러개 쌓이지 않게끔)

 

자바스크립트는 동기적(한번에 한줄 순서대로) 으로 처리 된다.

가끔 비동기적인 처리도 가능(setTimeout, 이벤트리스너, Ajax 등)