Js异步之宏任务和微任务

什么是宏任务和微任务

宏任务

• setTimeout、setInterval、Ajax、DOM事件

微任务

• Promise、async/await

微任务执行时机比宏任务早

异步和单线程

js是一门单线程脚本语言，需要异步来辅助

异步和同步的区别：

• 异步不会阻塞程序的执行
• 同步会阻塞程序的执行

使用异步的场景：

• 定时任务：setTimeout、setInterval
• 网络请求：ajax请求、动态 < img> 加载
• 事件绑定

ajax请求代码示例：

//ajax请求代码示例
console.log('start')
$.get('./data1.json',function(data1){
	console.log(data1)
})
console.log('end')

img加载示例：

console.log('start')
var img = document.createElement('img')
img.onload = function(){
    console.log('loaded');
}
img.src = '/xxx.png'

console.log('end')

事件绑定示例：

console.log('start')
document.getElementById('btn1').addEventListener('click',function(){
    alert('clicked')
})

console.log('end')

在请求处理过程中 会产生异步的请求 回头再处理 然后继续执行下面的请求

同步阻塞示例：

console.log(1000)
alert(200)
console.log(3000)

不点击alert确认窗口，不会打印3000

当我们打开网站的时候，网页的渲染过程就是同步任务，像页面骨架和页面元素的渲染，而加载图片、音乐之类的任务就是异步任务

js异步还有一个机制，就是遇到宏任务先执行宏任务，将宏任务放入任务队列，然后再执行微任务，将微任务放入微任务队列，但是往外拿的时候先从微任务队列里拿这个回调函数 然后再从宏任务的queue拿宏任务的回调函数