理解js的同步操作与异步操作

Posted 2021-02-17

字面误区：1、js同步操作任务，并非一起操作之意；2、js异步操作任务，也并非是指在不同线程里做不同的事情。

本质理解：首页js的语言执行环境是单线程的，也就是一次只能完成一个任务，多个任务就必须按照时间先后排队，前面完成后才能完成后一个任务。这个是js的常规模式，也就也是同步操作任务。

弊端：同步操作任务带来的问题是，只要一个任务执行时间过程，后面的任务都会排队等待，拖延整个程序的执行，如：常见的浏览器假死很可能就是js任务执行时间太长导致。

为了解决同步操作带来的弊端，js语言增加了异步任务的操作模式：当前任务可以携带回一个回调函数（当前任务执行时间过长，把需要提前执行的任务放在回掉中）；可以利用setTimeout构建异步任务，让主逻辑优先执行，对于耗时间长的任务可以放在setTimeout中异步执行。所以异步操作任务主要是改变了程序的正常执行操作顺序。

如下：

<script type="text/javascript">
console.log("1")
setTimeout(function(){
console.log("2")
},0)
setTimeout(function(){
console.log("3")
},0)
setTimeout(function(){
console.log("4")
},0)
console.log("5")

</script>

执行结果为：

1
5
2
3
4

那么大致的运行机制如下：
（1）在js主程序（单线程）上的同步任务形成了一个主任务执行栈
（2）主线程之外还存在一个任务队列，这个队列存在一些按时间顺序存放的事件，如鼠标点击、计时触发等，主线程中每出现一个异步任务，任务队列就会增加一个异步任务的事件
（3）一般执行栈中的同步任务执行完毕，系统就会读取任务队列，看看哪些事件是可以执行的，一旦可以执行将进入执行栈开始执行
（4）主线程不断重复