参考许多大神的文章,写下自己的理解
事件循环:
说到事件循环就得谈到js中同步和异步的执行顺序
1.javascript将任务分为同步任务和异步任务,同步任务放到主线中,异步函数首先进行回调函数注册。
2.当异步任务满足触发条件的时候,异步任务的回调函数会被放入事件队列中。
3.然后当主线程的同步任务都执行完毕,系统就会去事件队列中读取异步的回调函数。
例如这段代码:
// 同步任务 打印 first
console.log("1");
setTimeout(() => {
// 异步任务 回调函数放入事件队列,当主线程的同步任务都执行完毕打印
console.log("2");
},0)
// 同步任务 打印last
console.log("3");
//所以打印结果1 3 2
常见异步任务
1.DOM事件
2.AJAX请求
3.定时器setTimeout和setlnterval
4.ES6的Promise(Promise定义部分为同步任务,回调.then部分为异步任务)
例如这段代码:
setTimeout(() => {
console.log(1);
}, 0)
new Promise(function(resolve){
console.log(2);
for(var i = 0; i < 10000; i++){
i == 99 && resolve();
}
}).then(function(){
console.log(3)
});
console.log(4)
//按照上面的操作:可以很轻松得出案例的打印结果:2,4,1,3
可是结果却是2 4 3 1,那么也就意味着,JavaScript的异步任务是存在优先级的。
JavaScript除了广义上将任务划分为同步任务和异步任务,还对异步任务进行了更精细的划分。异步任务又进一步分为微任务和宏任务。宏任务和微任务分别有各自的任务队列即宏任务队列和微任务队列。例如下面这张图:
可以看到宏任务有script,定时器,ajax,history traversal i/o,微任务有promise.then,process.nextTick,MutationObserver,Object,observer
history traversal任务(h5当中的历史操作)
process.nextTick(nodejs中的一个异步操作)
MutationObserver(h5里面增加的,用来监听DOM节点变化的)
下面是执行顺序: