js异步 同步 微宏任务

先看下面一串代码

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

        async function async2() {
            console.log( 'async2')
        }

        console.log('script start')

        setTimeout(function () {
            console.log('setTimeout')
        }, 0)

        async1()

        new Promise(function (resolve) {
            console.log( 'promise1')  
            resolve() 
        }).then(function () {
            console.log('resolve end')
        })
        console.log('script end')   

这也是一个很经典的案例  主要用来区分 微任务 和宏任务，同步异步大概都不用多说了 多多少少

干前端的都知道，但是这个微任务和宏任务都是什么

概念1： JS是单线程执行

”JS是单线程的”指的是JS 引擎线程。

在浏览器环境中，有JS 引擎线程和渲染线程，且两个线程互斥。
Node环境中，只有JS 线程。

概念2：宿主

JS运行的环境。一般为浏览器或者Node。

概念3：执行栈

是一个存储函数调用的栈结构，遵循先进后出的原则。

概念4：Event Loop

Event Loop中，每一次循环称为tick，每一次tick的任务如下：

• 执行栈选择最先进入队列的宏任务（一般都是script），执行其同步代码直至结束；
• 检查是否存在微任务，有则会执行至微任务队列为空；
• 如果宿主为浏览器，可能会渲染页面；
• 开始下一轮tick，执行宏任务中的异步代码（setTimeout等回调）。

概念5：宏任务和微任务

ES6 规范中，microtask 称为 jobs，macrotask 称为 task
宏任务是由宿主发起的，而微任务由JavaScript自身发起。

在ES3以及以前的版本中，JavaScript本身没有发起异步请求的能力，也就没有微任务的存在。在ES5之后，JavaScript引入了Promise，这样，不需要浏览器，JavaScript引擎自身也能够发起异步任务了。

看到这里肯定有人回看不懂，其实说白了 用大白话说：

宏任务

(macro)task，可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。

浏览器为了能够使得JS内部(macro)task与DOM任务能够有序的执行，会在一个(macro)task执行结束后，在下一个(macro)task 执行开始前，对页面进行重新渲染

微任务

microtask,可以理解是在当前 task 执行结束后立即执行的任务。也就是说，在当前task任务后，下一个task之前，在渲染之前。

所以它的响应速度相比setTimeout（setTimeout是task）会更快，因为无需等渲染。也就是说，在某一个macrotask执行完后，就会将在它执行期间产生的所有microtask都执行完毕（在渲染前）。

微任务包括 promise  async  等等

其实按照不是那么官方的话来说 就是他比异步走的快和同步在一起执行 但是有人肯定会有疑问

总所周知啊   我说的微任务走的快 promise确实是微任务 但是 .then是一个回调函数  回调函数他就不一样了 所以 其实上面的代码执行是这样的

async function async1() {
            console.log(2, 'async1 start')
            await async2()  //当前是同步,注意此处加await，会阻塞下面代码执行，下面代码是异步。不加的话，下面代码是同步
            console.log(6, 'async1 end')
        }

        async function async2() {
            console.log(3, 'async2')
        }

        console.log(1, 'script start')

        setTimeout(function () {
            console.log(8, 'setTimeout')
        }, 0)

        async1()

        new Promise(function (resolve) {
            console.log(4, 'promise1')  //注意此处，在这里是同步
            resolve()  //这是异步
        }).then(function () {
            console.log(7, 'resolve end')
        })
        console.log(5, 'script end')