JavaScript异步与同步解析

221 阅读4分钟
基本概念:
  • 消息队列中的任务分为宏任务微任务;
  • 调用栈也可以称为主线程
单线程:
  • 单线程指的是只有一个主线程的线程的语言。也就是说,它并不能像JAVA语言那样,多个线程并发执行。
  • JavaScript就是一个单线程的语言
为什么js是单线程?如果一个线程在一个节点中添加内容,另一个线程要删除这个节点。所以为了不必要的麻烦,js就是一门单线程语言。
js的异步执行分析:
  • 拿现实生活来举例,比如一个人在家(将一个人比作单线程),你既要煮饭又要炒菜。
  • 这里我们把煮饭算作一个异步的任务,因为煮饭是一个比较耗时的任务(一般像比较耗时或不确定执行时间的任务,比如定时器,网络请求,事件执行 都是异步执行),其次你没炒完菜是不会去吃饭的(也就是主线程任务没有完成,是不会执行异步任务的)。
  • 那么你可以怎么做呢?你可以把煮饭的任务交给电饭煲处理。
  • 先把米放入电饭煲交给了电饭煲处理,再去炒菜,炒完菜再去把煮好的饭取出来。
  • 将饭交给电饭煲处理相当于开启了一个异步的任务,电饭煲就是处理这个异步任务的模块。饭煮好了会自动跳转,这就相当于异步任务被对应的模块解析好了会自动放入消息队列,等待事件循环调入主线程执行(前提是主线程任务全部执行完毕)。
  • 主线程任务执行完成,会通过不断的循环消息队列,来执行其中的任务。
  • 也就是你把炒菜完了,你就会不断的观察饭是否跳转(也就是循环消息队列看是否有任务),如果有就把饭装到碗里开始吃饭,此时任务就全部完成。
  • 但是干活的始终还是一个人,这就是单线程的异步执行过程。
图解:

异步任务图解.png

代码演示:
console.log("遇到煮饭任务,将饭放入电饭煲");
//使用setTimeout模拟煮饭
setTimeout(()=>{
	console.log("饭已经煮熟,等待饭被取出");
},0);
console.log("开始炒菜任务");

你以为的执行顺序:“遇到煮饭任务,将饭放入电饭煲 ” -> “饭已经煮熟,等待饭被取出 -> ”开始炒菜任务“

但是你想想这样符合逻辑吗,你会等饭熟练才开始炒菜吗?

最终执行顺序:“遇到煮饭任务,将饭放入电饭煲 ” -> “开始炒菜任务” -> “饭已经煮熟,等待饭被取出”

显然js都知道你认为的执行顺序是不符合逻辑的。这里setTimeout就是一个异步任务,其中的箭头函数就是异步完成后回调的函数。

解释疑惑:

JavaScript既然是单线程语言,那么为什么同时可以执行多个任务(同时煮饭炒菜)?

你可能会想这TM不是废话吗,煮饭交给电饭煲了啊。

确实没错,煮饭任务交给电饭煲了,那么在js中是谁去处理这些异步的任务呢?

前面异步任务分析有说到,异步任务会被对应模块解析(饭被电饭煲模块解析)。那么这就和宿主有关系了,js一般都是运行在游览器上(当然有node.js),也就是寄生在游览器上,那么宿主就是游览器。所以是宿主提供的模块去处理这些异步任务,使得js可以实现与其他语言类似的多线程操作

补充异步任务执行顺序:
  • 而常见的promise,async,await 执行放入的是微任务队列中,主线程的代码执行完后,会优先循环微任务队列的代码,再是宏任务队列。
  • 主线程 > 微任务 > 宏任务
  • 注意!!宏任务队列与微任务队列的任务都是谁先进入队列谁先执行。
js的同步执行解析:
  • 代码由上至下依次执行。前面任务在执行,后面代码必须排队等待。
  • 就如上面的例子如果不做异步处理,让任务同步执行就会一直卡在做饭的地方,等饭煮好了才能去炒菜。
感兴趣还可以关注我的:

cnsd:m0_46217225

掘金:寸头男生

github:Buzz_cut

微信公众号:web_mycode

知乎:寸头男生

我的QQ:2356924146

我会持续的编程干货。