# Stack, Queue를 이용한 웹브라우저 동작원리

📌 웹 브라우저

: 서버에서 받아온 HTML, CSS, JS를 실행시켜주는 프로그램.

• 브라우저는 C++로 짜여져 있다.
• 실행해야할 자바스크립트 코드를 발견하면 C++로 만들어둔 stack에 넣어 돌린다.

자바스크립트의 코드처리과정 특징

python 같은 언어는 위에서 부터 순서대로 코드가 실행된다.

2를 출력하고 1초 후에 4를 출력함.

JS는 조금 다르다.

2를 출력하고 4가 출력되기 전에 6이 먼저 출력됨.

-> 코드의 위치와 관계없이 빠른 것부터 실행됨.

웹 브라우저 동작원리

Stack : 코드를 맨 윗줄부터 하나하나 실행시키는 공간

하나 밖에 없기 때문에 코드를 한 줄씩만 실행할 수 있음.
-> 이 때문에 자바스크립트는 보통 single threaded 라고 함.

변수를 만나면 채우기 위해 Heap에서 변수의 값을 찾음.

(처리 시간이 오래 걸리는) 바로 실행할 수 없는 코드는 대기실(Web API)로 보냄.
-> 대기실 보내는 코드들 : Ajax 요청 코드(서버에서 데이터 받아오는 코드), 이벤트리스너, setTimeout(0초로 해도 무조건 대기실로 감)

Heap : 변수가 저장되어 있는 공간

Queue : 대기실에서 다시 stack으로 보내기 전, 대기가 끝난 코드들을 모아둔 공간

코드를 stack으로 하나씩 올려보냄.
⭐️ 중요: stack이 비어있을 때만 올려보냄.

📌 복잡한 반복문이나 어려운 수학 계산은 자바스크립트로 시키면 안 된다.

이유 : 계산하는 동안 (처리 시간이 오래 걸리는)다른 코드들이 실행되지 않음. 계산을 하느라 stack이 비워지지 않아서 대기실에서 계속 있기 때문.
-> 브라우저가 멈추거나 하얗게 변하게 되는 결과를 초래함.
-> browser freezing의 원인이 되기도 함.

만약 복잡한 반복문을 돌려야 한다면?

방법 1. setTimeout을 이용

• 정해진 시간마다 쪼개서 반복

방법 2. Web worker를 이용

• 다른 자바스크립트 파일을 이용해서 어려운 연산을 시키고, 그게 완료가 되면 값을 가져오라고 명령할 수 있음. -> Worker 클래스 이용.

교훈

1. stack을 바쁘게 만들면 안된다.

• 원인 : 너무 복잡한 계산이나 반복문

2. queue를 바쁘게 만들면 안된다.

• 원인 : 하나의 버튼에 여러 이벤트리스너를 넣는 경우