웹브라우저 동작원리를 왜 알아야 할까?
- javascript를 작성하면 이를 브라우져가 실행시켜줌 → html css js를 해석시키는 엔진이 바로 브라우저
Javascript의 동작 순서
console.log(1+1) //1빠로 실행
setTimeOut(function(){console.log(2+2)},1000) //3빠로 실행
console.log(3+3) //2빠로 실행왜 js는 이런 순서로 동작을 하게 될까??
이러한 동작순서를 이해하기 위해선 자바스크립트의 메모리 구조를 이해해야 한다
웹브라우저 내부
위와 같은 메모리 구조로 setTimeOut이나 ajax와 같은 비동기 처리방식은 queue라는 메모리에 저장이 되고 stack에 있는 처리들이 모두 실행이 되고 난 뒤에 queue메모리 안에 있는 비동기 처리들이 실행이 된다.
따라서 Javascript로 복잡한 연산을 필요로 하는 작업을 해선 안됨! 왜냐하면 stack에서 작업속도가 오래 걸리는 연산이 실행되는 중간에 클릭이벤트나 ajax요청이 발생하게되면 작동이 안되기 때문! ⇒stack이 모두 실행된 상태에서만 Queue에서 stack으로 올라가기 때문(브라우저 프리징의 원인이 됨)
오늘의 교훈!
- stack을 바쁘게 하지말자!
- queue를 바쁘게 하지 말자!
덧붙혀서 Javascript는 동기적으로 처리가 된다!(한번에 한줄 순서대로 ㄱㄱ)
하지만 가끔 비동기적인 처리도 가능(setTimeout, 이벤트리스너, ajax)
