异步编程初认识,看了就懂

106 阅读2分钟

Javascript执行环境是单线程

image.png

单线程: 一次只能做一个任务,有多个任务时,必须排队进行,前一个任务做完了,才能进行下一个任务。也称为同步模式,代码从上往下依次被执行。

同步模式

优点:实现起来比较简单,执行环境相对单纯;

缺点:遇到耗时较长的任务,后面的任务都必须排队等着,会拖延整个程序的执行。就是常说的浏览器无响应(假死),导致整个页面卡在这个地方,其他任务无法执行。

为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步模式和异步模式。

下面由一张图来介绍同步任务和异步任务的执行方式:

截图.png

这里涉及到消息队列(Queue)事件循环/消息线程(EventLoop)宏任务和微任务,莫急,下面以通俗易懂的方式来讲解。

在执行JS代码时,同步任务会依次先进入到JS主线程,而异步任务会发起异步调用线程,调起异步任务。

异步任务调用完毕得到结果后,会立即被依次放进消息队列中,等待EventLoop发起轮询。

》》消息队列是用于存放等待被执行的异步任务。

本轮同步任务一旦执行完毕,EventLoop 立马向消息队列发去消息,询问是否有在等待被执行的任务。有,就会根据调用完毕的先后顺序,依次进入主线程执行。

消息队列里的任务,又分为宏任务和微任务。

宏任务,常见的有定时器(setTimeout和setInterval)、ajax请求、DOM事件;

微任务,常见的是Promise、async/await。

执行顺序:微任务 > DOM渲染 > 宏任务

微任务会先于宏任务进入主线程执行,而DOM渲染则在两者中间,即:先执行微任务,再进行DOM渲染,最后才到宏任务。

本篇文章纯属个人理解,前端小伙伴们看完觉得有所收获或者有任何高见,欢迎留言点赞!