js 的执行顺序：js首先执行同步代码，然后执行微队列中的代码，最后执行宏队列中的代码。如果都是微任务或宏队列，谁先加入微队列或宏队列就先输出谁（谁在前面就先输出谁）
1. js 中的宏队列
- dom 事件回调
- ajax 回调
- 定时器回调 setTimeout
2. js 中的微队列
- promise 回调
- async（原理Promise）
- h5 MutationObserver
- queueMicrotask（兼容性较差ie edge不支持）
- asap库（原理就是封装了 MutationObserver 和 nodejs中的 process.nextTick()）
3. js 中的队列执行顺序测试
- 第一题
/*
宏任务 setTimeout
*/
setTimeout(() => {
console.log('setTimeout')
})
/*
微任务 ES6 Promise
*/
Promise.resolve('ES6 Promise').then((v) => {
console.log(v)
})
/*
微任务 H5新特性 MutationObserver
*/
// 为了节约开销，创建一个文本而不是创建一个 dom
const textNode = document.createTextNode('0');
// MutationObserver 可以绑定某个节点，当节点改变时，回调函数callback将放入微任务中
new MutationObserver(()=>{
console.log('MutationObserver')
}).observe(textNode, {
// 当文本改变时触发回调
characterData: true
});
// 改变文本，回调callback触发
textNode.data = '1';
/*
微任务 queueMicrotask 对象（支持node）
*/
queueMicrotask(() => {
console.log('queueMicrotask');
});
/*
同步执行
*/
console.log('同步任务');
/*
在浏览器中依次输出
"同步任务"
"ES6 Promise"
"MutationObserver"
"queueMicrotask"
"setTimeout"
*/- 第二题
setTimeout(function(){
console.log('111');
},0);
new Promise(function(resolve, reject){
console.log('222');
for (let i = 0; i < 1000; i++) {
var count = i*(i+1)
}
resolve('333');
console.log('444', count);
}).then(function(v){
console.log(v);
return Promise.resolve(v+1);
}).then(v=>{
console.log(v);
return Promise.reject('555')
}).catch(e=>{
console.log(e)
return new Promise(function(resolve, reject){
setTimeout(() => {
console.log('666');
resolve('777');
resolve('888')
}, 0);
})
}).then((v)=>{
console.log(v);
});
new Promise((resolve,reject)=>{
console.log('999');
setTimeout(() => {
resolve('aaa')
console.log('bbb');
}, 0);
}).then(v=>{
console.log(v);
new Promise((resolve,reject)=>{
console.log('ccc');
setTimeout(() => {
reject('ddd')
});
resolve('eee');
})
}).then(v=>{
console.log(v);
},e=>{
console.log(e);
})
console.log('fff');
/*
正确输出顺序为
222
444 999000
999
fff
333
3331
555
undefined
111
bbb
aaa
ccc
undefined
666
777
*/如果上面两题的结果都能够理解的话，说明就真正的理解 同步任务、异步（微队列、宏队列）任务了，再看其他的面试题也就不在话下了
MutationObserver
MutationObserver
发表评论：