【基本概念】:
【大致了解宏/微 任务】:
DOM事件,setTimeout(()=>{},1000); 点击按钮执行的事件和setTimeout执行的回调函数,这些都是称做任务;
JS是单线程的,任务会被放到事件队列中去;
队列是先进先出的,就会不断地从队列里取出事件,然后将事件在JS的主线程中依次执行,浏览器是有这个机制的;
但是——这个任务队列其实有两种:宏任务队列/微任务队列;
微任务的优先级是要比宏任务的优先级高的:
执行宏任务之前都要看一下有没有微任务!,先清空微任务队列,才会轮到宏任务队列~~~!
【同步/异步】:
<script type="text/javascript">
console.log( "1" );
setTimeout(function() {
console.log( "2" )
}, 0 );
setTimeout(function() {
console.log( "3" )
}, 0 );
setTimeout(function() {
console.log( "4" )
}, 0 );
console.log( "5" );
</script>
【图解同步/异步】:
【Event Loop】:
主线程从“任务队列”中读取事件,这个过程是循环不断的,所以整个过程的这种运行机制又称为Event Loop(事件循环)。
【 综合面试题 】:
setTimeout(function () {
console.log('1')
});
new Promise(
function (resolve) {
console.log('2');
resolve();
}
).then(function () {
console.log('3')
});
console.log('4');
【最终输出】:2 4 3 1
【解释】:
setTimeout(function () { //异步任务,进入宏任务队列
console.log('1')
});
new Promise(
function (resolve) { //主线程
console.log('2');
resolve();
}
).then(function () { //异步任务,进入微任务队列
console.log('3')
});
console.log('4'); //主线程
【常见的微任务】:
Promise.resolve().then( 回调函数P ) , 这个函数P就是微任务~~~!
watch( 回调函数 ) preQueue
组件的更新update jobQueue
生命周期回调 postQueue
【Vue和微任务】:
Vue在进行设计的时候 , 是通过微任务来进行调度的 , 下面举一个小例子来说明这么设计的优点:
for循环里变量增加了100次 , 假如有监听的话 , watch只会执行一次~~~!
上图中红色区域的函数,会被当做一个任务,加到所有微任务的最后。他就会等待它之前加到队列里的任务全部都执行完成之后再去执行~~~所以会等到组件更新的微任务结束之后 , nextTick中的微任务再执行,这个时候DOM是被更新过的,所以就会输出更新之后的高度!!!
【常见的宏任务】:
DOM事件,setTimeout回调的函数都是属于宏任务;