JavaScript의 마이크로태스크란 무엇입니까?

Javascript에서 마이크로태스크에는 1. "Promise"; 2. "Object.observe"; 4. Node.js 환경의 "process.nextTick";

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

Event Loop

JavaScript 언어의 주요 특징은 단일 스레드라는 것입니다. 즉, 한 번에 한 가지 작업만 수행할 수 있다는 의미입니다. 이벤트, 사용자 상호 작용, 스크립트, UI 렌더링, 네트워크 처리 및 기타 활동을 조정하여 메인 스레드가 차단되는 것을 방지하기 위해 이벤트 루프 솔루션이 탄생했습니다. Event Loop에는 두 가지 유형이 있습니다. 하나는 Browsing Context를 기반으로 하고 다른 하나는 Worker를 기반으로 합니다. 두 가지가 독립적으로 실행됩니다. 즉, JavaScript가 실행되는 각 "스레드 환경"에는 독립적인 이벤트 루프가 있고 각 웹 작업자에도 독립적인 이벤트 루프가 있습니다.

이 기사에 포함된 이벤트 루프는 검색 컨텍스트를 기반으로 합니다.

Task Queue

사양에 따르면 이벤트 루프는 작업 대기열 메커니즘을 통해 조정됩니다. 이벤트 루프에는 하나 이상의 작업 대기열이 있을 수 있습니다. 작업 대기열은 순서가 지정된 작업의 모음입니다. 각 작업에는 동일한 작업 대기열에서 발생하는 작업 소스가 있습니다. 다른 소스의 작업은 다른 대기열에 추가됩니다. setTimeout/Promise와 같은 API는 작업 소스이며 작업 대기열에 들어가는 것은 API가 지정하는 특정 실행 작업입니다.

이벤트 루프에서는 각 루프 연산을 틱이라고 합니다. 각 틱의 작업 처리 모델은 비교적 복잡하지만 주요 단계는 다음과 같습니다.

• 이 틱에서 먼저 대기열에 들어가는 작업을 선택합니다( 가장 오래된 작업)이 있으면 (한 번) 실행

• Microtask가 있는지 확인하고, Microtask가 있으면 Microtasks Queue가 지워질 때까지 계속 실행

• Update render

• 메인 스레드 위 단계를 반복합니다

어필 체크를 기준으로 몇 가지 사항을 이해해야 합니다.

• JS는 동기 작업과 비동기 작업으로 구분됩니다.

• 동기 작업은 메인 스레드에서 실행되어 실행을 형성합니다. 스택

• 메인 스레드 외부에서 이벤트 트리거 스레드는 작업 대기열을 관리합니다. 비동기 작업에 실행 결과가 있는 한 이벤트는 작업 대기열에 배치됩니다.

• 실행 스택의 모든 동기 작업이 실행되면(현재 JS 엔진은 유휴 상태임) 시스템은 작업 대기열을 읽고 실행 가능한 비동기 작업을 실행 가능 스택에 추가한 후 실행을 시작합니다.

Macro task

(macro)task를 사용하면 매번 실행 스택에 의해 실행되는 코드가 매크로 작업임을 알 수 있습니다(이벤트에서 이벤트 콜백을 얻을 때마다 포함). 큐에 넣고 스택에서 실행되는 실행에 넣습니다).

JS 내부(매크로) 작업과 DOM 작업을 순서대로 실행할 수 있도록 브라우저는 하나의(매크로) 작업 실행이 끝난 후 다음(매크로) 작업 실행이 시작되기 전에 페이지를 다시 렌더링합니다.

(macro)task->渲染->(macro)task->...

매크로 작업에는

script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)

Micro task

microtask가 포함되며, 이는 현재 작업 실행이 끝난 후 즉시 실행되는 작업으로 이해될 수 있습니다. 즉, 현재 작업 후, 다음 작업 전, 렌더링 전입니다.

그러면 렌더링을 기다릴 필요가 없기 때문에 응답 속도가 setTimeout(setTimeout은 작업임)보다 빠릅니다. 즉, 특정 매크로태스크가 실행된 후 해당 실행 중에 생성된 모든 마이크로태스크가 렌더링 전 실행됩니다.

마이크로 작업에는 다음이 포함됩니다.

Promise
Object.observe
MutationObserver
process.nextTick(Node.js 环境)
async/await

작업 메커니즘

이벤트 루프에서 각 루프 작업을 틱이라고 합니다. 각 틱의 작업 처리 모델은 비교적 복잡하지만 주요 단계는 다음과 같습니다.

• 매크로 작업 실행(스택에 없는 경우 이벤트 대기열에서 가져오기)

• 실행 중에 마이크로 작업이 발견되면 마이크로 작업의 작업 대기열에 추가하세요

• 매크로 작업 실행 완료 후 즉시 현재 마이크로태스크 대기열의 모든 마이크로태스크를 실행합니다(순차적으로 실행됨)

• 현재 매크로 태스크가 실행된 후 렌더링 확인을 시작하고 GUI 스레드가 렌더링을 인수합니다

• 이후 렌더링이 완료되면 JS 스레드가 계속 이어받습니다. 다음 매크로 작업을 시작합니다(이벤트 큐에서 가져옴)

표시된 대로:

[관련 권장 사항: javascript 학습 튜토리얼]

위 내용은 JavaScript의 마이크로태스크란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!