js 작업

1945 단어 taskpromisesettimeout

앞말


코드 한 소절 볼게요.
setTimeout(function() {
    console.log('timeout');
}, 0);

new Promise((resolve, reject) => {
    console.log('promise');
    resolve();
}).then(function() {
    console.log('then');
});

console.log('global');

출력:promise 、global、 then、timeout

macrotasks와 microtasks


V8 구현에는 다음 두 가지 작업이 포함됩니다.

macrotasks

script , setTimeout , setInterval , setImmediate , I/O , UI rendering

microtasks

process.nextTick , Promises , Object.observe , MutationObserver

다음 절차를 수행합니다.

  • 자바스크립트 엔진은 먼저 macrotaskqueue에서 첫 번째 작업을 꺼냅니다
  • 실행이 끝난 후 microtaskqueue의 모든 작업을 꺼내서 순서대로 모두 실행합니다
  • 브라우저에서 보기를 렌더링한 다음macrotaskqueue에서 다음을 찾습니다
  • 실행이 끝난 후 microtaskqueue의 모든 것을 다시 꺼냅니다
  • 두queue의 임무를 모두 끝낼 때까지 순환한다

  • 참고:
  • 위에서 보듯이 microtask가 실행이 끝나야 렌더링을 할 수 있습니다. 만약에 microtask가 실행되는 시간이 길어지면 렉이 걸릴 수 있습니다
  • 위의 실행 과정은 크롬일 뿐,safri는 그다지 다르다

  • 실행 프로세스의 예:https://jakearchibald.com/201...

    Promise를 시뮬레이션하는 방법.then

    
    new MutationObserver(function() {
        console.log('mutate');
    }).observe(document.body, {
        attributes: true
    });
    document.body.setAttribute('data-random', Math.random());
    
    
    setTimeout(function() {
        console.log('timeout');
    }, 0);
    
    
    new Promise((resolve, reject) => {
        console.log('promise');
        resolve();
    }).then(function() {
        console.log('then');
    });
    console.log('global');

    출력:promise,global,mutate,then,timeout

    참고 자료:

  • microTask : https://github.com/kaerus-com...
  • es-promise : https://github.com/stefanpenn...
  • 좋은 웹페이지 즐겨찾기