20.웹브라우저 동작원리 - ES6
Updated:
-
stack 에 담아서 코드를 실행 하는데 JS 는 특징이 하나의 스택에서 하나의 코드씩 실행 시키기 때문에 보통 single threaded 방식이라고 합니다.
-
그래서
setTimeout()같이 실행이 오래걸리는 code 를 만날경우 바로 실행이 안되기 때문에 stack 에서 빼서 대기하고 다음 code 로 바로 넘어가버립니다.
🔑 위에 stack 에서 처리안하고 대기상태로 보내는 코드 형태는 다음과 같습니다.
-
Ajax 요청 코드
-
EventLister
-
SetTimeout() 등 시간이 걸리는 code 들
🔷 대기를 끝낸 코드는 stack 에 바로 다시 담겨지는것이 아니라 순서대로 Queue 에 저장되서 순서대로 하나씩 stack 에 저장된다고 보면 됩니다. (**단!! Stack 이 처리작업을 마친 후, 즉
비어 있을때, queue 에서 stack 으로 옴겨진다고 보면 됩**)
📌 Q. 만약 setTimeout() 의 시간을 0초로 하면 바로 실행되는것인가?
=> No, stack 에서 setTimeout() 의 함수는 무조건 대기상태로 밀어 버리고, Queue 를 통해 stack 으로 와서 처리를 하게 됨
SumUp
-
JS 로 code 시, 시간이 오래 걸리는 연산 또는 반복문이 길면(몇만번) 하게 되면 중간에 대기실로 보내는 것들 (Ajax, EventLister 등) 이 실행이 안되고 계속 queue 에서 대기상태로 있게 됨 (왜냐면 stack 에서 code 처리를 끝내야 되기 때문에..)
-
Queue 에 대기하는 code 도 마찬가지로 대기를 오래하게 되면 웹사이트 동작시 시간이 오래 걸리게 됨
JS 는 동기 vs 비동기
-
원래 자바스크립트 동기적으로 처리됩니다. 한번에 한줄 순서대로 실행됩니다. (Stack 은 하나밖에 없기 때문에)
-
가끔 JS 는 비동기적인 처리도 가능합니다. (setTimeout, Eventlister, ajax 함수등을 쓰면 됩니다.)
🔶 🔷 📌 🔑
Leave a comment