웹 브라우저의 동작원리

글의 시작

오늘 다루는 주제는 웹 브라우저가 어떻게 동작하는지에 대한 내용이다.

자바스크립트의 동작 원리에 대해서 공부하다가 궁금해진 내용이다.

사실 가장 기초가 되면서도 중요한 내용이다.

웹 개발자가 웹 브라우저가 어떻게 동작하는지에 대한 이해도가 있어야 한다고 생각한다. 

스스로 이해도를 높이기 위해서 그림을 많이 사용할 예정이다.

 

 

🤔 우리가 작성한 코드가 어떻게 브라우저에서 실행되는 걸까? 

 

오늘은 우리가 작성한 코드가 어떻게 웹 브라우저에서 동작하는지 Stack, Queue를 이용해서 살펴보고자 한다. 

 

먼저 다음 코드를 살펴 보자. 

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

결과값이 어떤 순서로 출력이 될까? 

단순하게 봤을때는 console.log(2) => console.log(4) => console.log(6) 순으로 진행될 거 같다. 

 

근데 순서가 아래 사진처럼 2 => 6 => 4로 진행된다. 

실행 순서

왜..? 이렇게 나올까?

 

먼저 웹 브라우저의 동작원리를 알아야 하는 이유는 내가 짠 자바스크립트는 브라우저가 실행해주니 잘 알아야 한다. 

브라우저의 사고방식은 우리의 사고방식과 다르다.

 

 

웹 브라우저의 내부를 좀 들여다보자. 

 

 

맨 처음에 Stack이라는 공간 안에 우리가 작성한 코드를 한 줄 한 줄 넣는다.

 

잠깐.. Stack은 무엇을 하는 곳인가? 

Stack은 우리 코드를 실행해주는 곳이다. 그리고 특징은 하나만 존재한다. 그래서 한 번에 코드 한 줄 밖에 실행 못한다. 

그래서 보통 자바스크립트는 single threded 언어라고 부른다. 

 

우리가 자료구조에서도 배웠지만 Stack은 LIFO(Last-In-First-Out) 방식으로 동작한다. 즉, 쌓인 접시를 생각하면 편하다. 

접시를 쌓으려면 순서대로 차곡차곡 쌓고 치울 때는 가장 위에서부터 그릇을 빼낸다. Stack은 이런 방식으로 작동한다. 

 

Stack

위의 그림처럼 나중에 들어온 console.log(1+1)이 먼저 실행되고 나중에 console.log(2+2)가 실행된다. 

 

 

 

만약에 Stack에서 코드를 실행할 때 변수를 만나면 어떻게 할까? 

Stack이 변수를 만났을 때

Stack이 변수를 만나면 Heap이라는 공간에 변수들이 저장되어 있다. Heap에서 변수를 갖다 사용한다. 

 

 

그림(상단 코드)

다시, 위에 코드를 다시 살펴보자.

setTime과 같은 코드는 바로 실행을 할 수가 없는 코드이다. 

바로 실행도 안 되는데 자리 차지하고 있으면 그러니 저 코드는 대기실로 잠깐 빠진다.

 

그림(상단 코드)

이렇게 대기실로 보내는 코드들이 있는데, 

대표적으로 Ajax 요청 코드, 이벤트리스너, setTimeout 등이 있다.

 

자 그러면, 이제 1초가 지나서 대기실에 있는 코드가 실행을 해야 하는데 바로 Stack으로 이동하는 것이 아니라 대기실이 마련되어 있다. 

그게 바로 Queue이다. 

보통 콜백 큐 or 이벤트 큐라고 부른다.  

Queue는 Stack과 다르게 FIFO(First-In-First-Out) 방식으로 동작한다. 즉, 쉽게 생각해서 터널을 생각하면 된다. 터널에서는 먼저 들어온 차가 먼저 나간다. 

 

 

이벤트 큐

그림처럼 이렇게 오래걸리는 코드들을 줄을 세워서 Queue에서 대기시킨다. 이렇게 하는 이유는 Stack은 너무 바쁜 공간이라서 그렇다. 

 

 

 

이벤트 큐 작동 원리

그리고 나서 Stack이 비어있는 것을 확인한 후에 코드를 올려보낸다. 여기에는 전제 조건이 있는데 반드시 Stack이 비어있을 때만 올려 보낼 수 있다.  

 

그림(상단 코드)

결론적으로, 상단 코드는 위의 그림처럼 작동하게 된다. 

 

 

우리가 코드를 짜면서 가장 주의해야 할 점은, 자바스크립트에 오래 걸리는 어려운 연산 시키면 안 된다.

10초 걸리는 연산을 시키면 Stack에서 10초간 코드가 실행되니까 그 시간 동안에 Stack이 비어있지 않아 다른 이벤트 리스너가 작동하지 않는 불상사가 발생한다.

실제 브라우저에서 보면 버튼을 눌러도 응답 없는 페이지 같은 안내 메시지가 뜰 때가 대표적인 예시(Freezing)다. 

 

글의 마무리

내가 배웠던 자료구조(큐, 스택, 힙)가 브라우저의 동작 원리에서 사용된다니 신기했다. 

구조에 대한 학습을 했으니 적용을 위해서 내가 다음에 설계하는 과정에서 참고해보려고 한다.

단순하게 생각하서 코드를 짜기 보다는 깊게 고민한 흔적들이 결국 더 좋은 코드로 가는 지름길이 되는 거 같다.    

 

 

📚 오늘의 교훈 

1️⃣ Stack 바쁘게 만들지 말자 

2️⃣ Queue 바쁘게 만들지 말자(특히 이벤트 리스너 너무 많이 부착하지 말자)

3️⃣ 코드를 짤 때 내 코드가 어떻게 동작할지 머릿 속에서 생각해보자.