关于js单线程,事件循环,微任务宏任务

众所周知,javascript是一门单线程\异步、非阻塞、解释型脚本语言。所谓单线程,就是当上一句代码没执行完时,下一句代码不会执行。 所以当在页面中需要请求数据时,如果数据都是以单线程的形式请求,会造成上面的数据没有请求到时,下面的数据也不会发送请求,造成很卡的现象。
解决这个问题我们可以将请求代码写成异步请求的格式(ajax,axios);

虽然js引擎只维护一个主线程用来解释执行JS代码,但实际上浏览器环境中还存在其他的线程,例如处理AJAX,DOM,定时器等,我们可以称他们为工作线程。同时浏览器中还维护了一个消息队列,主线程会将执行过程中遇到的异步请求发送给这个消息队列,等到主线程空闲时再来执行消息队列中的任务。

同步任务的缺点是阻塞,异步任务的缺点是会使代码执行顺序难以判断。两者比较一下我们还是更倾向于后者。所以这里写个例子对时间循环做下总结。

console.log('start')
Promise((resovle,reject)=>{
	console.log('1')
}).then(()=>{
		setTimeout(() => {
  			console.log('2')
		},0)
		console.log('3')
})
console.log('4')
setTimeout(() => {
  console.log('5')
},0)
console.log('end')
// 这段代码的执行顺序为
start ,1 , 4 ,end , 3 , 5 , 2

做下解释,因为Promise 本身为同步操作,一旦调用直接执行,而then方法调用的回调函数为微任务,所以会暂存到微任务队列中。setTimeout也为异步,但setTimeout为宏任务放入宏任务队列,在执行异步队列时,首先执行微任务中then的回调,又遇见了setTimeout宏任务再放入宏任务队列,等所有微任务执行完毕时,执行宏任务。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 是一门单线程语言,也就是说在同一时间内只能执行一个任务。但是它又需要处理各种不同的任务,如 UI 事件、网络请求等。为了解决这个问题,JavaScript 引入了事件循环机制。 事件循环机制基于一个事件循环线程,该线程会不断地从任务队列中取出任务并执行。任务可以分为两种类型:宏任务微任务宏任务是指由浏览器或 Node.js 提供的 API,如 setTimeout、setInterval、I/O 操作等。当宏任务执行完毕后,事件循环线程会从宏任务队列中取出一个新的宏任务继续执行,直到宏任务队列为空。 微任务是指由 Promise、MutationObserver 等提供的异步任务。当一个微任务被加入队列中时,事件循环线程会在当前宏任务执行完毕后,立即执行所有微任务。如果在执行微任务的过程中,又产生了新的微任务,那么这些新的微任务会被添加到微任务队列的末尾,等待下一轮执行。 在事件循环机制中,每个宏任务只会对应一个微任务队列。当一个宏任务执行完毕后,会依次执行该宏任务对应的微任务队列中的所有微任务,直到微任务队列为空。然后再取出下一个宏任务并执行。 总结一下,事件循环机制的执行顺序为:执行一个宏任务,接着执行该宏任务微任务队列中的所有微任务,然后再执行下一个宏任务。这个过程会不断地重复,直到所有任务都被执行完毕。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值