정의
유저 에이전트가 스크립트의 실행환경을 제어하며 사용되는 이벤트 루프에 제어를 반환하기 전인 자바스크립트 실행 스택이 비어있을 경우에만 나가도록 만들어진 함수 또는 프로그램 이후에 실행되는 짧은 함수
자바스크립트 프라미스는 마이크로테스크 큐를 사용해서 자신들의 콜백을 실행시키지만, 현재 이벤트 루프 패스가 마무리될 때까지 작업을 디퍼하는 능력일 때 다른 조건들이 있다.
In-depth
자바스크립트는 내제적으로 싱글스레드 언어이다. 긍정적인 선택이었던 시대에 디자인되었다; 일반 대중들이 사용할 수 있는 멀티 프로세서 컴퓨터가 조금 있었고, 자바스크립트가 처리할 수 있는 코드의 양은 상대적으로 그 당시에는 적었다.
시간이 흐르고, 당연히, 컴퓨터는 강력한 멀티 중심의 시스템으로 발전하였고 자바스크립트는 컴퓨팅 세계에서 가장 많이 사용되는 언어 중 하나가 되었다. 가장 인기있는 애플리케이션의 대부분은 자바스크립트 코드로 구성되어 있다. 이를 지원하기 위해, 프로젝트들이 싱글스레드 언어의 한게를 탈피할 수 있는 방법을 찾을 수 있도록 해야 했다.
웹 API(setTimeout(), setInterval())의 일부로 타임아웃, 인터벌이 추가되어, 웹 브라우저가 제공하는 자바스크립트 환경은 점차 작업의 스케줄링, 멀티스레드 애플리케이션 개발 그 이상을 가능하게 하는 강력한 특징들을 포함되도록 발전하였다. queueMicrotask()를 어디에서 사용되는 지 이해하기 위해서 코드를 계획하고 실행할 때 자바스크립트 런타임이 어떻게 작동하는 것을 이해하는 것이 중요하다.
자바스크립트 코드의 일부가 실행될 때, 실행 콘텍스트 안에서 작동한다. 새로운 실행 콘텍스트가 만들어지는 코드의 세 종류의 타입이 존재한다.
- 전역 콘텍스트는 코드의 메인 바디를 실행하도록 만들어진 실행 콘텍스트; 자바스크립트 함수의 바깥쪽에 존재하는 코드
- 함수는 각자 자신들의 실행 콘텍스트 내에서 실행한다. 자주 지역 콘텍스트라고 불린다.
- 추천하지 않은 eval()함수를 사용하는 것도 새로운 실행 콘텍스트이다.
각각의 콘텍스트는 본질적으로 코드 내의 스코프 단계를 가지고 있다. 이러한 코드 중 하나가 실행됨으로써, 새로운 콘텍스트는 실행될 수 있게 만들어진다; 그런 다음 코드가 종료되고 사라진다.
자바스크립트 코드를 실행하기 위해서, 런타임 엔진은 자바스크립트 코드를 실행하는 일련의 에이전트들을 유지한다. 각각의 에이전트는 일련의 실행 콘텍스트인 실행 콘텍스트 스택, 메인스레드 그리고 워커, 테스크 큐, 마이크로테스크 큐를 처리하도록 만들어지는 추가적인 스레드를 위한 집합으로 구성되어 있다.
Event loops
각각의 에이전트는 유저와 이벤트를 모아 각각의 콜백을 처리하는 작업을 큐에 넣는 이벤트 루프에 의해 처리된다. 그런다음 대기하고 있는 자바스크립트 테스크를 실행시키고 그 다음 대기하고 있는 마이크로테스크를 그 다음에 다시 돌아 대기하는 작업을 확인하기 전에 렌더링하도록 수행한다.
웹사이트나 앱의 코드는 웹브라우저 그 자체의 유저 인터페이스로서 같은 이벤트 루프를 공유하며 같은 스레드에서 작동한다. 이는 메인 스레드이며 사이트의 메인 코드 바디를 실행시키는 것에 더하며 유저와 이벤트를 받고 분리하는 것을 처리하여 웹 컨텐트를 보여준다.
그런 다음, 유저의 반응에 발생함으로써 브라우저에서 일어나는 모든 것을 컨트롤하지만 우리의 목적에서 매우 중요하게, 스레드 내에서 작동하는 코드의 모든 조각의 실행과 스케줄링에 책임을 가지고 있다.
Three Types
-
Window event loop
: 비슷한 오리진을 공유하는 모든 윈도우를 제어하는 거다. -
Worker event loop
: 워커를 작동하게 하는 루프; 기본적인 웹 워커, 공유된 워커, 서비스 워커를 포함하여 모든 워커의 형식을 담고 있다. 워커는 메인 코드에서 떨어진 하나 이상의 에이전트에 갇혀 있다; 브라우저는 주어진 타입의 모든 워커를 위한 단일 이벤트 루프를 사용하거나 멀티 이벤트 루프를 사용해서 그것들을 처리한다. -
Worklet event loop
: 주어진 에이전트의 워클렛에 코드를 실행시키는 에이전트를 다루는 데 사용되는 루프.
Thread
동시에 여러 태스크나 프로그램을 실행시키는 작업. 코드를 실행시키는 각각의 이용가능한 유닛을 스레드라 부른다.
메인 스레드는 유저 이벤트를 처리하고 화면상에 보여지며 전형적인 웹 페이지를 구성하는 코드의 대부분을 작동시키도록 브라우저에 의해 사용되는거다. 한 스레드 안에서 이러한 모든 게 발생되기 때문에 느린 웹사이트나 앱 스크립트는 전체 브라우저를 느리게 만든다; 악화시킨다, 사이트나 앱 스크립트가 무한루프에 들어갈 경우, 전체 브라우저는 모든 작업을 멈출 것이다. 이는 유저 경험을 악화시키는 결과를 가져온다.
서비스 워커같은 웹 워커를 의도적으로 사용하는 게 아니라면, 자바스크립트는 메인스레드에서 작동하며 그래서 스크립트가 이벤트 처리나 페인팅 같은 작업에서 지연을 발생시키기 쉽다. 메인 스레드를 덜 필요로 하는 작업일 수록 스레드는 유저 이벤트에 반응하고 그리며 기본적으로 유저에 더욱 더 반응적이다.
현대 자바스크립트는 추가적인 스레드를 만드는 방법을 제공하며, 가능한 그 중 하나와 커뮤니케이션을 하는 동안 독립적으로 각각 실행된다. 이는 웹 워커와 같은 기술을 사용하여 처리되며, 각자의 스레드에서 메인 스레와 동시에 실행하는 서브 프로그램을 만드는 데 사용될 수 있다. 이는 느리고, 복잡한 또는 오래 걸리는 작업들이 메인 스레드에서 각자 실행되도록 하며, 사이트/앱의 전체적인 성능을 보존할 수 있게 된다-브라우저 전체 뿐만 아니라. 스레딩은 또한 웹 어플리케이션이 현대 멀티 코어 프로세서를 활용할 수 있도록 한다: 단일 코어에서 작동하는 멀티 스레드 애플리케이션보다 더 나은 성능을 보장한다.
서비스 워커라고 불리는 특정 타입의 워커는 유저의 허가와 함께 유저가 현재 사이트를 이용하고 있지 않더라도 실행시키도록 사이트에 의해 조용히 지나갈 수 있다. 사이트에 적극적으로 관여하지 않은 동안에 무언가 발생할 때 유저에게 알릴 수 있는 사이트를 만드는 데 사용된다. 유저에게 알리는 것으로서, 그들은 현재 메일 서비스에 로그인 되어 있지 않더라도 새로운 이메일을 받고 있다.
전체적으로 오퍼레이팅 시스템이 극히 도움되는 한에서 이러한 스레드는 발견할 수 있게 한다. 컨텍스트 스위칭 타임을 줄여 좀 더 효율적인 커뮤니케이션을 가능하게 하고 더 나아가 멀티프로세서 아키텍처의 사용을 허용한다.
Main Thread
브라우저가 유저 이벤트를 실행시키고 보여주는 곳
기본적으로 브라우저는 레이아웃, reflow, 가비지 컬렉션을 수행하는 것 뿐만 아니라 페이지 내에서 모든 자바스크립트를 실행시키는 싱글 스레드를 사용한다. 이는 오래 걸리는 자바스크립트 함수가 스레드를 막는 것을 의미하며 안 좋은 유저 경험과 반응하지 않는 페이지가 되도록 한다.
