因为JavaScript是单线程的,也就是只有一个调用栈,调用栈按照先入后出的规则进行,一次调用一个,而且可以嵌套,在执行调用栈的时候会先执行同步的任务。
调用栈在发现异步任务的时候会把异步任务放入队列里面,异步任务队列分为宏任务队列和微任务队列,队列都按照先入先出的规则。
宏任务:
1.新程序或子程序被直接执行。(最常见就是<script>元素里面运行的代码就是程序被执行)
2.事件的回调函数。
3.setTimeout()和setInterval()
微任务:
1.Promise .then() .catch() .finally()
2.MutationObserver
3.Object.observe
要知道这里头的运行执行顺序,要如何运行就需要靠Event Loop事件循环,事件循环会不断去寻找可以执行的任务来执行,在完成了同步任务以后,也就是清空了调用栈以后,首先会执行微任务队列的任务,把微任务队列的任务清空以后才会去执行宏任务。
总结:在JavaScript里,首先执行宏任务,因为script是打头的。在调用栈为空的时候(此时script已出栈),事件循环优先执行微任务,并且清空微任务队列才会看一下需不需要渲染浏览器,渲染过后事件循环再进行下一轮宏任务。