집 > 기사 > 웹 프론트엔드 > js 이벤트의 루프 메커니즘 정보(자세한 튜토리얼)

js 이벤트의 루프 메커니즘 정보(자세한 튜토리얼)

亚连원래의: 2018-06-21 11:06:211525검색

이 글에서는 주로 js 이벤트 루프 메커니즘을 소개하고, 예제를 통해 사용법과 기술을 분석합니다.

이 기사에서는 예제를 통해 JS의 이벤트 루프 메커니즘의 원리와 사용법을 자세히 분석합니다. 전체 내용은 다음과 같습니다.

var start = new Date()
setTimeout(function () {
 var end = new Date
 console.log(&#39;Time elapsed:&#39;, end - start, &#39;ms&#39;)
}, 500)
while (new Date() - start < 1000) {
}

예상되는 기능을 완료할 수 있는 다른 언어가 있나요? Java.util.Timer에서 예약된 작업에 대한 솔루션은 멀티스레딩을 통해 구현됩니다. 작업 개체는 작업 대기열에 저장되고 전용 예약 스레드는 새로운 하위 스레드에서 작업 실행을 완료합니다

js는 단일 스레드입니다.

JavaScript의 주요 목적은 사용자와 상호 작용하고 DOM을 조작하는 것입니다. 이는 단일 스레드만 가능하다는 것을 결정합니다. 그렇지 않으면 매우 복잡한 동기화 문제가 발생합니다.

멀티 코어 CPU의 컴퓨팅 성능을 활용하기 위해 HTML5는 JavaScript 스크립트가 여러 스레드를 생성할 수 있도록 허용하지만 하위 스레드는 기본 스레드에 의해 완전히 제어되며 DOM을 작동해서는 안 되는 Web Worker 표준을 제안합니다. . 따라서 이 새로운 표준은 JavaScript의 단일 스레드 특성을 변경하지 않습니다.

함수 호출 스택 및 작업 대기열

Call stack

JS가 실행되면 호출 스택이 형성됩니다. 함수가 호출되면 반환 주소, 매개 변수 및 지역 변수가 푸시됩니다. 현재 실행 중인 경우 함수 내에서 다른 함수가 호출되면 함수의 관련 내용도 스택의 맨 위로 푸시됩니다. 함수가 실행된 후에는 호출 스택에서 팝됩니다. 변수도 팝업됩니다. 복합 유형 값은 힙에 저장되므로 해당 값은 여전히 힙에 있으며

이벤트에 의해 재활용됩니다. 루프 및 작업 대기열

자바스크립트 메인 스레드에는 실행 스택과 작업 대기열이 있습니다

비동기가 발생하는 경우 작동할 때(예: setTimeout, AJAX) 비동기 작업은 브라우저(OS)에 의해 실행됩니다. 완료되면 브라우저는 미리 정의된 콜백 함수를 메인 스레드의 작업 대기열에 푸시합니다. 메인 스레드가 스레드의 실행 스택을 지운 후 작업 대기열의 콜백 함수를 읽습니다. 읽으면 메인 스레드가 계속 실행되어 무한 루프에 들어갑니다.

메인 스레드 실행 스택 및 작업 큐는 루프에서 실행되어 이벤트 루프를 형성합니다

setTimeout() 이벤트를 "작업 대기열"에 삽입하기만 하면 됩니다. 메인 스레드가 지정된 콜백 함수를 실행하기 전에 현재 코드(실행 스택)가 완료될 때까지 기다려야 합니다. 현재 코드가 오래 걸리면 시간이 오래 걸릴 수 있으므로 setTimeout()에서 지정한 시간에 콜백 함수가 실행된다는 보장은 없습니다.

또 다른 예

(function test() {
 setTimeout(function() {console.log(4)}, 0);
 new Promise(function executor(resolve) {
 console.log(1);
 for( var i=0 ; i<10000 ; i++ ) {
 i == 9999 && resolve();
 }
 console.log(2);
 }).then(function() {
 console.log(5);
 });
 console.log(3);
})()

Macrotask & Microtask

Macrotask와 microtask는 비동기 작업의 두 가지 분류입니다. 작업을 일시 중지할 때 JS 엔진은 모든 작업을 범주에 따라 두 개의 대기열로 나눕니다. 먼저 첫 번째 작업은 매크로태스크 대기열(이 대기열은 작업 대기열이라고도 함)에서 제거됩니다. 모든 작업은 순차적으로 실행됩니다. 그런 다음 매크로태스크 작업을 가져오고 두 대기열의 모든 작업을 가져올 때까지 주기가 다시 시작됩니다.

macro-task: 스크립트(전체 코드), setTimeout, setInterval, setImmediate, I/O, UI 렌더링

micro-task: process.nextTick, Promises(여기서는 브라우저에서 구현하는 기본 Promise를 나타냄), Object.observe , MutationObserver

결론

모든 코드(스크립트) 매크로태스크 -> 마이크로태스크 대기열(promise.then 포함) -> 매크로태스크(setTimeout) -> Node.js의 이벤트 루프

process.nextTick & setImmediate

process.nextTick에 지정된 작업은 항상 모든 비동기 작업보다 먼저 발생합니다.

setImmediate에 지정된 작업은 항상 다음 이벤트 루프에서 실행됩니다.

process.nextTick(function A() {
 console.log(1);
 process.nextTick(function B(){console.log(2);});
});
setTimeout(function timeout() {
 console.log(&#39;TIMEOUT FIRED&#39;);
}, 0)

new Promise(function(resolve) {
 console.log(&#39;glob1_promise&#39;);
 resolve();
}).then(function() {
 console.log(&#39;glob1_then&#39;)
})
process.nextTick(function() {
 console.log(&#39;glob1_nextTick&#39;);
})

위 내용은 제가 모두를 위해 편집한 내용입니다. 앞으로 도움이 될 것입니다. 모두 도움이 됩니다.

js 이벤트의 루프 메커니즘 정보(자세한 튜토리얼)

관련 기사