Javascript 이벤트 루프란?

• 자바스크립트는 싱글 스레드 기반 언어이다. 즉 한번에 하나의 작업만을 처리 할 수 있다.
• 자바스크립트는 싱글 스레드 기반이며 논 블로킹 방식의 비동기적인 동시성 언어이며 콜 스택, 이벤트 루프와 콜백 큐 그리고 여러가지 다른 API들을 가지고 있다.
• 브라우저 환경 구성

 

• 콜스택
  • 자바스크립트는 싱글 스레드 언어이며 한번에 하나의 작업만을 처리 할 수 있다.
  • 콜스택 실행 순서
    1. 함수를 호출하면 실행 컨텍스트(Excution Context)가 생성되고 콜스택에 추가후 실행된다.
    2. 내부 함수가 있는 경우 콜스택에 추가되고 내부함수가 실행된다.

  function multiply(a,b) { // 3
    return a*b;
  }
  
  function square(n) { // 2
    return multiply(n,n);
  }
  
  function printSquare(n) { // 1
    var squared = square(n);
    console.log(squared);
  }
  
  printSquare(4);
  

  
• 단일 호출 스택의 단점
  • 브라우저에서 호출 스택에 실행할 함수가 쌓여있는 동안은 다른 일을 할 수 없다. 이 상태를 blocked라 한다. 이 상태에서 브라우저는 렌더링을 할 수도 없고, 다른 코드를 실행할 수도 없다.
    • 브라우저 자체가 동작을 하지 않음.
    • 매끄러운 화면 UI를 제공하지 못하게 됨.
    • 프로그램 동작 중에 이러한 현상은 사용자 경험을 완전히 망가뜨리는 일이다.
• Web APIs
  • 비동기 호출을 위해 사용하는 setTimeout, XHR과 같은 함수들은 자바스크립트 엔진이 아닌 Web API 영역에 정의되어 있다.
  • 자바스크립트가 싱글 스레드 기반임에도 불구하고 동시성 언어라고 부르는 이유는 웹 브라우저가 제공하는 Web APIs를 통해 동시에 작업을 할 수 있기 때문이다.
  • 콜백큐에 비동기 콜백(setTimeout, XHR)이 추가 될 경우 Web API가 대신 처리한다.

  console.log('First Stack');
  
  setTimeout(function callback(){
    console.log('Asynchronous Callback');
  }, 3000);
  
  console.log('Second Stack');

  
  • 이벤트 루프
    • 이벤트 루프는 하나의 단순한 동작만을 수행한다. stack과 callback queue를 감시하면서, 만약 stack이 비어있다면 이벤트 루프는 callback queue에서 첫 번째 Task를 stack에 넣고 해당 Task가 수행된다.
    • 콜백큐(Callback Queue)
      • 비동기 함수가 실행 된 후 콜백 함수가 대기하는 자료구조 이다.
  • 좀더 알면 좋은 것들
    • Callback Queue(Message Queue), Microtask Queue(Job Queue), Animation Frames
  • 예제
    • 셋타임아웃을 0으로 정의해도 콜백큐에 대기열에 들어가기 때문에 늦게 처리됨

    console.log('First Stack');
    
    setTimeout(function callback(){
      console.log('Asynchronous Callback');
    }, 0);
    
    console.log('Second Stack');

    • 셋타임아웃으로 같은 시간을 정의 했어도 콜백에서 실행되는 시간에 따라 실행 차이가 날 수 있음

    // 콜스택 시간차 현상
    setTimeout(function timer() {
        console.log('셋타임아웃1~~');
    
        // 딜레이
        const wakeUpTime = Date.now() + 3000;
        while (Date.now() < wakeUpTime) {}
    }, 2000);
    
    setTimeout(function timer() {
        console.log('셋타임아웃2~~');    
    }, 2000);
    
    setTimeout(function timer() {
        console.log('셋타임아웃3~~');    
    }, 2000);
    
    // http://latentflip.com/loupe/?code=c2V0VGltZW91dChmdW5jdGlvbiB0aW1lcigpIHsNCiAgICBjb25zb2xlLmxvZygnc2V0VGltZTEnKTsNCg0KICAgIGNvbnN0IHdha2VVcFRpbWUgPSBEYXRlLm5vdygpICsgMzAwMDsNCiAgICB3aGlsZSAoRGF0ZS5ub3coKSA8IHdha2VVcFRpbWUpIHt9DQp9LCAyMDAwKTsNCg0Kc2V0VGltZW91dChmdW5jdGlvbiB0aW1lcigpIHsNCiAgICBjb25zb2xlLmxvZygnc2V0VGltZTJ%2BJyk7ICAgIA0KfSwgMjAwMCk7DQoNCnNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7DQogICAgY29uc29sZS5sb2coJ3NldFRpbWUzJyk7ICAgIA0KfSwgMjAwMCk7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D

  • 참고 URL
    • 유투브 : https://www.youtube.com/watch?v=8aGhZQkoFbQ
    • 실습 사이트 : http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D