宏任务与微任务

异步

不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。不会阻塞程序任务

同步

在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。会阻塞程序的执行

---

前端使用异步的场景：

• 定时任务：setTimeout，setInverval
• 网络请求：ajax请求，动态图片加载
• 事件绑定

异步实例：

<img>加载示例
    console.log('start');
    var body = document.querySelector('body')
    var img  = document.createElement('img')
   	// 异步操作，回头才处理，继续下面的请求，不会阻塞代码执行
    img.onload = function() {
        console.log('loaded');
    }
    img.src = '1.png'
    body.appendChild(img)
    console.log('end');
    输出顺序：start --> end -->loaded

同步阻塞实例

    console.log('start');
    alert('200')
    console.log('end');

微任务和宏任务

异步任务又分为宏任务和微任务。

宏任务包括：setTimeout setInterval Ajax DOM事件
微任务：Promise async/await
微任务比宏任务的执行时间要早

console.log(100);

setTimeout(()=>{
    console.log(200);
})

setTimeout(()=>{
    console.log(201);
})

Promise.resolve().then(()=>{
    console.log(300);
})

console.log(400);
输出顺序： 100 --> 400 --> 300 --> 200 --> 201

async函数是一种异步编程的解决方案,是同步写法，但是是异步操作. 由promise封装来的，返回值是一个promise,await能够获取promise执行的结果，两个必须同时使用。

async function async1() {
    console.log('async1 start'); // 2
    await async2()	// 之后代码会放到一个回调里面
    console.log('async1 end');// 6
    console.log('await 回调');
}
async function async2() {
    console.log('async2'); // 3
}
console.log('script start'); // 1
setTimeout(function(){
    console.log('set'); // 8
},0)

async1()

new Promise(function(reslove){
    console.log('promis1'); // 4
    reslove()
}).then(function(){
    console.log('p2'); // 7
})
console.log('end'); // 5