JS 1 동작원리
JavaScript 동작원리
1+1 을 계산하고 1초 쉰 후에 2+2를 계산하는 코드를 짠다면
-
Python ver.
print(1+1) time.sleep(1) print(2+2)
- JavaScript ver.
console.log(1+1)
setTimeout(function(){}, 1000)
console.log(2+2)
// [X]
console.log(1+1)
setTimeout(function(){ console.log(2+2) }, 1000)
// [O]
- (3+3) 한 줄을 더 추가한다면
console.log(1+1)
setTimeout(function(){ console.log(2+2) }, 1000)
console.log(3+3)
위처럼 JS는 코드 기입 순서와 상관없이 출력됨
(코드를 위에 적든 밑에적든 빠른것부터 실행함)
보통의 프로그래밍 언어와 다르게 동작하는 방식이 다름(병렬처리? No)
-
웹브라우저 - JavaScript를 실행해주는 엔진들
stack 이라는 공간에 짠 코드를 한줄한줄 집어 넣어서 실행
이때 변수가 있으면 heap이라는 공간에 저장되어있는 변수를 가져다 씀
stack은 하나밖에 없는 통합공간 (single threaded language)
settimeout 같은 바로 실행하지 않는 코드는 대기실로 보내놓고 나중에 실행함
이렇게 대기시키는 코드들이 정해져 있음ex) Ajax요청(서버에서 데이터를 받아오는 코드), eventlistener(버튼누르면 실행해달라는 코드) settimeout처럼 지정시간후 실행해야할 코드가 동작해야할 때
Queue라는 공간에 처리가 완료된 코드들을 줄을 세운후에 stack으로 하나씩 올려보냄
(stack은 바쁜 공간이기때문에)
올려보내는 조건 : stack이 비어있을 때 하나씩 올려보냄
그래서 console.log(1+1) 실행하고/
settimeout(funcrion(){sonsole.log(2+2)}), 1000)은 대기실로 보내고/
console.log(3+3) 실행하고/
대기실에 있던 settimeout 코드는 Queue에 있다가 stack으로 보내서 실행
- settimeout 을 0으로 설정하면? : 0초가걸려도 무조건 대기실로 이동후 마지막에 실행
반복문을 천만번 돌리면 오래걸림 - JS에 시킬경우 stack에서 10초간 연산중
ajax요청, settimeout 등 작동이 안됨 (stack에서 천만번 연산중이기때문에)
stack을 바쁘게 만들면 유저들은 ‘이사이트 너무느려’라고 느끼게 됨
Queue를 바쁘게 만들어도 같은문제가 발생함
- 동기적(synchronous) vs 비동기적(asynchronous)
JS는 원래 synchronous로 처리가됨 (한번에 한줄코드가 순서대로 실행)
가끔 asynchronous처리를 할때는 : 특정 함수 Ajax, settimeout 등