[JavaScript知识库]宏任务与微任务 JavaScript

• 先看一道题

// js是单线程的,如果遇到了异步的内容,交给浏览器处理(等待,监听)
        console.log(1);
        setTimeout(() => {
            console.log(2);
        }, 0);
        console.log(3);

        // 输入答案顺序 1>>3>>2

如下图

1. js执行主线程,代码一步一步往下执行,js是单线程的,只要遇到异步的函数,不会停留,会将异步函数交给 浏览器处理
2. 浏览器是多线程的,可以同时处理多件事件的,让浏览器去等,去监听.处理异步函数
3. 浏览器将异步完成的任务,满足条件的,安置到任务队列中排队
4. 主线程的完成了空闲了,才会开始处理执行任务队列中的任务
   

宏任务: 主线程代码,setTimeout,上一个宏任务执行完,才会考虑执行下一个宏任务

微任务: promise.then .catch async/await的内容,属于微任务,满足条件的微任务,会在当前宏任务的最后,下一个宏任务前执行

执行流程图

1.先执行主线程的宏任务. 2.同等级任务队列中若有微任务先执行微任务, 3. DOM页面渲染 4.执行下一个宏任务

第二题

        console.log(1);
        setTimeout(() => {
            console.log(2);
        }, 0);

        const p = new Promise((resolve, reject) => {
            console.log('哈哈');
            resolve(1000)
        })
        p.then((res) => {
            console.log(res);
        })

        console.log(3);

        // 答案顺序 1 >> 哈哈 >>  3 >> 1000 >> 2