자바스크립트 동작 원리

자바스크립트 동작 원리

자바스크립트는 동기적 언어이다. 한번에 한 줄 순서대로 실행한다.

그러나, 가끔가다 비동기적인 처리를 할 수 있다. 자바스크립트 대부분의  DOM 이벤트리스너, (setTimeout 등의 timer 함수 , ajax 요청은 비동기식으로 동작한다.

한줄씩 처리하는게 아니라, 오래걸리는 건 제끼고 빨리 되는 걸 먼저!

 

일반적인 언어는 1+1을 하고, 1초 쉰 다음 2+2를 하고 싶을 때 이렇게 위에서 아래로 쭉 적는다.

 

그럼 이렇게 했을 때는?

 

기대값은 

2 -> 쉬고 -> 4 -> 6

이었겠지만 

2 -> 6 -> 쉬고 ->4

 

이런 방식으로 나온다 

 

왜 그런가요????

 

브라우저 동작 방식을 이해하자.

웹 브라우저 내부

• 자바스크립트는 싱글 스레드 언어로 코드를 한 번에 하나만 실행한다.
• 그러나 setTimeout같은 함수는 시간을 잡아먹는 코드는 대기실(web API 부분)로 옮긴다.

대기실로 가는 코드 :
1. Ajax 요청 코드(서버에게 데이터를 받아오는 코드 등),
2. 이벤트 리스너(버튼 누르면 이거 실행해줘),
3. Timer 함수 ex) setTimeout

 

• 대기실에서 기다리다가 시간이 끝나거나 완료가 되었을 경우
  • -> 이벤트 큐라는 준비줄로 가서 대기 끝난 코드들이 줄을 선다음
  • -> stack이 비어있을 때 만! stack으로 올려보낸다. (스택이 바빠서 그럼) 

 

이 순서대로니까 setTimeout에 있었던 2+2가 가장 마지막에 콘솔에 찍히는 것이다.

 

Q :그럼 만약에 setTimeout함수에 시간을 0초로 주면 어떻게 되나요?

A: 그래도 순서는 똑같음. 왜냐하면 이 setTimeout 함수 자체가 눈에 띄면 대기실로 가는 아이이기 때문이다.

 

 

그래서 우리가 생각해야 하는 것은? 

1. stack을 바쁘게 하면 안된다.
2. 자바스크립트로 10초 걸리는 등의 오랜 시간을 필요로 하는 복잡한 연산을 피해야 한다.
   • -> 버튼클릭 이벤트, ajax요청, setTimeout 이런 게 안됨! stack이 비어있지 않아서, 그 함수가 제대로 실행 안됨!(버튼 눌러도 반응이 없다던가... 응답 없는 페이지...)
3.  queue도 바쁘게 하면 안된다. 버튼 하나에 이벤트 리스너를 많이 걸면 이제 실행에 부담.

 

 

 

https://www.youtube.com/watch?v=v67LloZ1ieI