자바스크립트 이벤트 루프

자바스크립트의 이벤트 루프에 대해 설명하기 전에

 

자바스크립트에서의 멀티쓰레딩과 실행 환경에 대해 알아보겠습니다.

 

자바스크립트의 실행 환경 (엔진 + 환경 요소)

  자바스크립트 언어 자체는 싱글 쓰레딩 언어입니다.

 

  이 말은 멀티쓰레딩이 기능이 없다는 것이고 비동기적인 처리가 불가능하다는 뜻입니다.

 

  하지만 브라우저의 API들을 이용하여 비동기적인 처리를 할 수 있으며

   

  이벤트 루프를 통해 다양한 방식을 이용하여 멀티 쓰레딩 같은 효과를 얻을 수 있습니다.

  (즉, 비동기적 처리를 하는 것처럼 동작)

 

  우선 위의 동작을 쉽게 이해하기 위해 간단하게 자바스크립트의 엔진을 표현해 보겠습니다.

 

자바스크립트의 엔진 (간단한 표현)

 

  위 그림은 아주 간단하게 표현한 자바스크립트의 엔진입니다.

 

  실제로는 더 많은 구성요소들이 있습니다. 

 

  Memory heap - 데이터를 생성 시 저장하는 공간

                        이 공간은 구조적으로 정리된 자료구조가 아니기 때문에 자료가 아무 곳에 저장됨

  

  Call stack - 함수의 실행 순서를 저장하는 공간

                  이 공간은 실행 순서를 기억해야 하기 때문에 차곡차곡 쌓이는 stack의 구조로 저장됨

 

---

 

  여기까지 자바스크립트의 엔진을 간단하게 살펴보았습니다.

  

  그럼 이제 런타임 시 자바스크립트의 환경의 요소를 살펴보겠습니다.

 

  Task Queue 

      - 지정한 이벤트가 발생 됐을 때 테스크 큐라는 자료구조에 해당 이벤트의 콜백 함수를 저장하고

 

        이벤트 루프가 테스크 큐에 저장된 콜백함수를 자바스크립트 엔진의 stack이 비었을 때 stack에 콜백 함수를

     

        넣어줍니다.

 

        즉, Task Queue는 이벤트를 관리하는 자료구조입니다.

 

  Microtask Queue

      - 프로미스에 등록된 콜백들을 관리하는 자료구조입니다.

 

  Render

      - 주기적으로 요소를 움직이거나 애니메이션이 있을 때 주기적으로 브라우저를 업데이트해주는 자료구조

      

        즉, 자바스크립트가 동적으로 요소를 바꿔 다시 그릴 수 있게 해 주는 자료구조입니다.

 

     이외의 더 다양한 자료구조들이 존재합니다.

   

---

 

    이제 위에 설명했던 자바스크립트의 실행 환경(엔진 + 환경의 요소)을 가지고

 

    싱글쓰레드인 자바스크립트가 어떻게 멀티쓰레딩처럼 사용이 되는지 알아보겠습니다.

 

event loop

    - 자바스크립트가 멀티쓰레딩이 가능했던 이유는 바로 이벤트 루프입니다.

 

      이벤트 루프는 자바스크립트의 실행 환경에서 무한정으로 call stack과 런타임 실행요소의 자료구조들을

        

      감시하기 때문입니다.

     

자바스크립트 실행 환경

 

    위 그림에서 처럼 이벤트 루프가 무한정하게 빠르게 돌면서 call stack에 있는 함수를 실행시킨 후 비우게 됩니다.

 

    그리고 함수를 실행시키는 동안에 이벤트 루프는 해당 함수에 머물게 됩니다.

    

    그렇기 때문에 브라우저에서 여러 가지의 API들을 순서대로 처리가 잘 되는 것입니다.

 

    또 call stack에 있는 함수들을 다 비우게 되면

 

    Microtask Queue, Task Queue 등 안에 콜백 함수가 담겨있는지 확인하고

 

    있을 경우 콜백 함수를 call stack에 넣어 실행하게 됩니다.

 

    이런 작업을 이벤트 루프가 빠르게 감시하여 동작하기 때문에 멀티 쓰레딩 처럼 보이는 것입니다.

 

---

 

    추가적으로 런타임 환경의 요소들의 자료구조들은 각자마다의 특징이 있습니다.

 

Task Queue 특징

 

     - 이벤트 루프가 이벤트를 확인한 뒤 자료구조안에 있는 하나의 아이템만 (1바퀴 순회중 1개만 실행)

 

       call stack에 쌓고 실행시킵니다.

 

 

Microtask Queue 특징

 

     - 이벤트루프가 Microtask Queue에 머물러 있는 동안 안에 있는 아이템이 없을 때까지

 

       하나씩 call stack에 쌓게 되고 실행시킵니다.

 

 

       주의) Microtask Queue에 이벤트 루프가 머물러 있는 동안 계속해서 promise가 들어오게 된다면

 

               이벤트 루프가 빠져나오지 못하는 경우가 생길 수 있습니다.

 

Render 특징

 

    - Render는 위 자료구조와는 다르게 정해진 함수들을 호출하여 실행하게 됩니다.

 

      Request Animation Frame, Render Tree, Layout, Paint 등 브라우저에 출력을 담당하는 함수들이 실행됩니다.

 

      그렇기 때문에 이벤트 루프가 1바퀴 돌 때마다 업데이트를 하게 된다면 불필요한 처리가 늘어나게 됩니다.

 

      그래서 Render는 사용자에게 부드러운 애니메이션을 보여주기 위한 최소 단위인 1초당 60개의 프레임의

 

      속도로 업데이트를 하게 됩니다.  (이 속도는 평균 16.7ms이며 각 브라우저마다 기준이 다릅니다)

 

      그리고 Request Animation Frame API를 사용하여 callback 함수를 전달하게 되면

 

      브라우저가 업데이트하기 전에 callback 함수를 실행되기 때문에 유용하게 사용할 수 있습니다.