ES6-宏队列与微队列

ES6-宏队列与微队列

1.宏队列：用来保存待执行的宏任务（回调），比如：定时回调、DOM事件回调、ajax回调；
script（全局任务）、setTimeout、setInterval、setImmediate、I/O、UI rendering

2.微队列：用来保存待执行的微任务（回调），比如：promise的回调、mutationObserver的回调
process.nextTick、promise.then\Object.observer\MutationObserver

JS执行时会区分这两个队列：
1.JS引擎首先必须先执行所有的初始化同步任务代码
2.每次准备初期第一个宏任务执行前，都要将所有的微任务取出来一个一个的执行
代码示例：

console.log('1===>全局队列script')

setTimeout(function () {
    console.log('2===>timeout1');
    new Promise(function (resolve) {
        console.log('3====>timeout1_promise')
        resolve();
    }).then(function () {
        console.log('4====>timeout1_then')
    });
},2000);
for(var i=1;i<5;i++){
    setTimeout(function () {
        console.log('5===>timeout2'+i)
    },i*1000);
    console.log('6===>全局队列script='+i)
}
new Promise(function (resolve) {
   console.log('7====>promise1');
   resolve();
}).then(function () {
    console.log('8===>then1');
})
    setTimeout(function () {
        console.log('9===>timeout3');
        new Promise(function (resolve) {
            console.log('10===>timeout3_promise')
            resolve()
        }).then(function () {
            console.log('11==>timeout3_promise_then')
        })
    },1000)

    new Promise(function (resolve) {
        console.log('12==>promise2')
        resolve()
    }).then(function () {
        console.log('13==>promise2_then2')
    })

    var interval=setInterval(function () {
        console.log('15===>setinterval');
        new Promise(function (resolve) {
            console.log('16==>setinterval_promise')
            resolve()
        }).then(function () {
            console.log('17===>setinterval_then');
        })
    },1000);
setTimeout(function () {
    clearInterval(interval);
},1000)

console.log('18-=====>全局队列script')

总结：
1.JS中为了防止线程阻塞，组织全局代码的执行，衍生出很多异步执行解决方案，这些方案都会按需要加载到指定的队列中，当全局队列执行完毕后，开始循环从微队列->宏队列->微队列->宏队列。。这样的执行顺序执行下去；
2.当一个宏队列执行完毕，立即执行最近添加的微队列；
3.这种逻辑也可以为首页加速带来思路

【补充：闭包特点】

1.函数套函数
2.内部函数可以访问外部函数的变量
3.局部变量，垃圾回收机制无法回收