JS同步异步宏任务微任务

【基本概念】：

【大致了解宏/微 任务】：

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回调的函数都是属于宏任务；