웹 브라우저의 동작 원리를 왜 알아야 해?

요즘 자바스크립트는 웹 뿐만 아니라, 서버나 IoT등 거의 전 분야에서 사용을 하고 있다.
프론트엔드인 나도 매일 만지고 있는 언어로, 결국 내가 짠 자바스크립트 코드는 브라우저가 실행해주기 때문에,
언어를 해석해주는 엔진인 웹 브라우저가 어떻게 동작하는지에 대해 공부할 필요가 있다.

먼저 일반적으로 우리가 알고있는 해석 순서를 살펴보자면

print(1+1)
 time.sleep(1)
 print(2+2)

• 코드 순서대로 위에서 아래로 하나씩 결과를 출력한다. (feat.python)
  1. print(1+1) 실행 후 결과 2 출력
  2. time.sleep(1) 실행으로 1초 쉬고~
  3. print(2+2) 실행 후 결과 4 출력

그럼 자바스크립트는?

console.log(1 + 1)

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

console.log(3 + 3)

• 자바스크립트는 코드를 위에 적든 밑에 적든 빠른 것부터 실행해준다.

  1. console.log(1+1) 실행 후 결과 2 출력
  2. console.log(3+3) 실행 후 결과 6 출력..?
  3. setTimeout(function(){...}) 실행으로 결과 4 출력

• 브라우저에서 자바스크립트를 해석하는 순서는 내가 일반적으로 알고 있던 순서와는 확실히 다르다.
  이 의문을 풀기 위해서 Keep Going!

How JavaScript Works 😵‍💫

• 웹 브라우저 : 자바스크립트 실행해주는 엔진(크롬, 웨일, 파이어폭스 등)

• 실행하는데 있어, 정확한 원리와 단계가 존재한다.

Heap

메모리 할당이 일어나는 곳. 쉽게 말해서 변수가 저장되어 있는 공간이다.

Stack

코드를 실행해주는 곳. 단, 한 번에 한 줄씩만 실행 가능한 Single Thread이다.
코드를 실행하다가 변수를 만나면 Heap 안에 저장된 변수를 가져다 쓴다.
setTimeout() 과 같은 비동기 함수가 들어오면 Waiting Room으로 놔두고 나머지 코드를 계속 실행한다.

Waiting Room

Ajax 요청 코드나 이벤트 리스너와 같은 비동기 함수는 여기서 잠깐 대기한다.

Queue

대기실에서 처리가 끝난 비동기 함수들이 넘어와서 기다린 다음, 다시 Stack 공간으로 보내진다.
여기서 가장 중요한 조건은 Stack 공간이 비어있을 때만 보내진다는 것!

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

• setTimeout()의 시간이 0이라면 어떨까?
  1. console.log(1+1) 실행 후 결과 2 출력
  2. console.log(3+3) 실행 후 결과 6 출력
  3. setTimeout(() => {...}, 0) 실행 후 결과 4 출력
• setTimeout과 같은 함수는 무조건 대기실로 이동한 다음, Queue에서 기다렸다가 Stack에서 실행되기 때문에 마지막으로 출력이 된다.

✨ 정리

애초에 자바스크립트로 어려운 로직이나 10초 이상 걸리는 어려운 연산(반복문)이 Stack에 있으면, 중간에 버튼 클릭을 하거나 Ajax 요청 후 코드 실행이나 setTimeout 함수들이 작동하지 않는다..

왜냐하면! 버튼을 누르는 것은 이벤트 리스너로, Waiting Room을 거쳐서 Queue에 갔다가 Stack으로 가야하는데
이 때 Stack에 계속 할 일이 쌓여있으면 보내질 수 없다! 😫

Stack으로 가기 위해서는 Stack 자리가 꼭. 꼭 비어있어야 한다는 점을 기억하자.

브라우저는 복잡해지면 그대로 Freezing…

☑️ Stack 바쁘게 하지말 것! 사이트가 느려져서 사용자 경험이 나빠질 수 있다. ❄️

☑️ Queue 바쁘게 하지말 것! 이벤트 리스너를 다중으로 걸어두면 그 자체로도 사이트가 버벅거릴 수 있다. ☃️

☑️ 자바스크립트는 동기적? 비동기적? 자바스크립트는 원래 동기적 처리다. 한 번에 한 줄 실행(Stack)을 한다. 가끔 비동기적인 처리도 가능한데 오래 걸리는 함수는 놔두고 차례대로 실행한다.

이어지는 다음 포스팅은 Event Loop에 대해서 더 자세하게 말해볼 것이다.

참고 내용

코딩애플