UI 차단 동작: 마이크로태스크와 매크로태스크

아래 두 코드 조각의 차이점을 찾을 수 있나요?

function handleClick1() {
     setTimeout(handleClick1, 0);
}

function handleClick2() {
     Promise.resolve().then(handleClick2);
}

둘 중 하나를 선택할 때의 의미를 식별할 수 없다면 이 블로그 게시물에서 새로운 내용을 배울 수 있습니다.

배경

setTimeout은 일정 시간이 지난 후 콜백을 예약하는 데 사용됩니다. Promise.resolve().then은 동일한 작업을 효과적으로 수행하지만 내부적으로 둘 다 다릅니다. 후자는 이미 해결된 Promise를 반환합니다. 해당 약속에 대해 then(콜백)을 호출하면 콜백이 실행되도록 예약됩니다.

따라서 위의 두 함수는 모두 지연을 최소화하면서 스스로를 재귀적으로 호출합니다. 차이점은 setTimeout의 콜백은 매크로태스크 대기열에 배치되고 promise.then()의 콜백은 마이크로태스크 대기열에 배치된다는 것입니다. 이벤트 루프가 이 두 대기열의 항목을 처리하는 방식이 위의 두 코드 조각의 차이점을 만듭니다.

마이크로태스크와 매크로태스크의 이벤트 루프 처리

이벤트 루프가 하는 일은 수행할 작업이 있는 동안 해당 작업을 수행한 다음 절전 모드로 전환하고 다른 작업을 기다리는 것입니다.

매크로 작업(또는 간단히 작업)에는 다음과 같은 작업을 담당하는 기능이 포함됩니다.

1. 파싱
2. DOM에 대한 반응

그 중에서도...

작업 대기열에서 선택한 작업을 실행한 후 이벤트 루프는 마이크로태스크 체크포인트를 수행합니다. 다음과 같은 알고리즘은 다음과 같습니다.

While microtask queue is not empty, pick the oldest task from microtask queue and execute it.

이는 마이크로태스크가 다른 마이크로태스크를 대기열에 추가하면 해당 작업이 다음 매크로태스크보다 먼저 실행된다는 것을 의미합니다. 그리고 UI 렌더링은 매크로 작업이므로 이벤트 루프에 의해 실행되지 않습니다.

다음은 위에 대한 데모입니다: JS Bin 데모. 무한 애니메이션이 실행 중입니다. handlerClick1을 트리거하면 기본 스레드에 일부 처리가 추가되지만 애니메이션은 여전히 ​​올바르게 렌더링됩니다. 하지만 handlerClick2를 실행하면 애니메이션이 중지됩니다.

페이지가 충돌하기 전에 중단할 수 있도록 totalCount 변수를 추가했습니다. 하지만 눈에 띄는 점은 microTask 루프가 시작되면 UI가 한동안 응답하지 않는다는 것입니다. 렌더링, DOM에 대한 반응 등과 같은 작업은 microtask 대기열이 비어진 후에만 실행되기 때문입니다.

이렇게 하면 위 코드 스니펫의 handlerClick1이 더 안전한 선택이 됩니다. 블로그가 마이크로태스크와 매크로태스크의 근본적인 차이점을 설명하는 데 도움이 되었기를 바랍니다.

위 내용은 UI 차단 동작: 마이크로태스크와 매크로태스크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!