JS同步、异步

Event Loop

• tick
  在Event Loop中，每一次循环为tick

每一次tick的任务：

• 执行同步任务，遇到异步任务会推入到事件列表，执行同步任务直至结束；
• 异步任务执行事件列表，并注册回调函数，推入到事件队列；
• 检查微任务队列，执行至空；
• 开始下一轮tick，执行异步代码

这样就形成了JS中相当重要的事件循环（Event Loop）

宏任务/微任务

宏任务和微任务都属于异步任务，一个宏任务执行结束后会查看微任务队列是否为空而去决定执行微任务还是执行下一个宏任务

宏任务：script（外层同步代码）、setTimeout、setInterval、I/O
宿主：浏览器/node

微任务：Process.nextTick、Promise、MutationObserve。
宿主：JS引擎

一段代码中在所有微任务执行完毕之前是不会去执行宏任务的！！！
先执行script中的同步的任务，console.log、Promise。遇到setTimeout将它推到事件列表中同步代码执行结束后查看异步代码执行结束了没有（.then),.then为微任务，到此微任务执行完毕开始执行下一个宏任务setTimeout

async await

理解：

 async function async1() {
            await async2();
            console.log('async1 end');
        }

        async function async2() {
            console.log('async2 end');
        }
        async1();

相当于：

 async function async1() {
            new Promise(res=>{
                async2()
                res()
            }).then(()=>{
                console.log('async1 end');
            })
        }

        async function async2() {
            console.log('async2 end');
        }
        async1();

应用场景

Vue vm.$nextTick

vm.$nextTick接受一个回调函数作为参数，用于将回调延迟到下次DOM更新周期（微任务执行）之后执行

这个API是基于EVENT Loop实现的