[Javascript] EVENT LOOP란? (feat. 코딩애플)

EVENT LOOP란? (부제:브라우저 동작 원리)

자바스크립트를 누가 실행시켜주낭? 브라우저!(엔진)

• console.log(1+1)
• setTimeout(fumction(){console.log(2+2)}, 1000)
• console.log(3+3)

JS에서 결과는? 2, 6, (1초 쉬고)4

!코드 위에 적든 밑에 적든 빠른거부터 실행해준다!

그렇다면 js는 병렬처리가 가능한가??? NO!!!!

그렇다면 브라우저 동작 원리를 알아보자.

• Heap : 참조 타입들이 할당되는 곳이다. 콜 스택과 달리, Heap의 메모리 할당은 LIFO 정책을 따르지 않고 랜덤하게 배치된다.
  또한 메모리 누수를 방지하기 위해 JS 엔진의 메모리 관리자가 항상 관리한다.
• Stack : js코드를 진행해주는 곳.
  싱글스레드이므로 js가 병렬처리 가능하다는 말은 옳지 않음

 

• Queue : Stack으로 바로 보내지 않고, 대기실로 보내는 코드들을 보관하는 곳.

 

💡 마무리...

• stack/queue를 바쁘게 하지 말자(웹페이지 다운, freezing 원인이 됨)
• js는 동기적으로 처러되며, queue에 함수를 보관하게 하여 비동기적 처리도 가능하다.
• js는 싱글스레드인데 이러한 작업들이 가능한가? js에 과부하 안걸리나?
  이벤트루프는 js에 내장된 것이 아니라 엔진에 내장되어 있는 것임!(맞나..?)

참조 : 코딩애플 유투브, JS 메모리 구조 블로그 글