JS 비동기 큐 (마이크로 및 매크로)

JS 이벤트 중심의 이벤트 루프 메커니즘에 의존는 무엇 JS?

단순히 자신의 이해에 대해 쓰기 때문에 포괄적 아니다;

두 가지 방법으로 JS 메인 프로그램 실행 큐와 비동기 대기열

스택은 상이한 종류에 따라 해석 코드 블록을 설명하기 위해 수행된다
적층하고 적층 순서 (LIFO)을 순차적으로 수행

모드 메인 큐, 즉, 위에서 아래로 순차적으로 실행될

그리고 비동기 큐 macroTask macroTask을 포함

에서는 setTimeout setInterval을 IO UIRendering 포함 macroTask (만 일반적으로 사용 포함)
약속 과정을 포함 microTask,

microTask 큐있을 경우 실행되는 메인 쓰레드 후 첫 실행이 완료되면 볼 다음 macroTask 수행

예를 들어, 내 테스트 코드는 다음과 같이

console.log("1")
setTimeout(function () {
    console.log("2")
})
Promise.resolve().then(function () {
    console.log("3")
    setTimeout(function () {
        console.log("31")
        setTimeout(function () {
            console.log("311")
        })
        Promise.resolve().then(function () {
            console.log("3111")
        })
    })
}).then(function () {
    console.log("4")
})
setTimeout(function () {
    console.log("5")
    Promise.resolve().then(function () {
        console.log("51")
    })
})
console.log("11")

//输出如下: 1 11 3 4 2 5 51 31 3111 311
//macro [2, 5]  [31]
//micro [3, 4]  [51]

중요 고려 사항 :

microTask는 macroTask 속해 렌더링, 페이지를 렌더링 방해;

이 구현 회람 microTask 그렇다면, UI 렌더링 방해한다;

하지만에서는 setTimeout은하지 않습니다;

또한 영국 공군 (requestAnimationFrame가), 이것은 전문적인 사용을 렌더링하는 데 사용되는, 사용되는 실행 속도가 될 것입니다주의
의 setTimeout보다 훨씬 적은.

JS 큐

JS 비동기 큐 (마이크로 및 매크로)

추천