js程序运行时序原理

js程序运行时序原理

1.概念

浏览器中每一个Tab代表一个进程,其中每个进程中由多个线程组成,主要由Js引擎线程、HTTP请求线程、定时触发线程、事件触发线程、GUI线程;

1. JS引擎线程:主线程,运行优先级最高,大部分的js语句都在此线程中运行;

2. HTTP请求线程:如axios中请求

3. 定时触发线程:如setOutTime中执行的线程

4. 事件触发线程:如普通的点击事件,文本改变事件等

5. GUI线程:显示页面的渲染线程

其中JS引擎线程被称为主线程

2.任务队列

JS的程序运行中由主队列、微任务、宏任务三个队列组成,主队列的执行最优先,微任务其次,宏任务最后,其中的执行的顺序和java线程中消费者生产者模型类似;

其中主队列为消费者,微任务和宏任务为仓库,程序是生产者

线程中的普通程序优先放入到主队列中执行,其中axios请求的任务会放置到微任务中,定时任务会放置到宏任务中

当主队列中所用程序执行完后再来执行微任务,axios请求完成后会将回调函数.then()中的方法放到主队列中消费

当微任务中都执行完毕后再执行宏任务,一般也就是定时任务中的程序

有一种特殊情况,比如两个定时任务一前一后,定时任务执行中触发了axios请求就会有新的回调函数放置到微任务中,这是优先消费微任务中程序;

举例说明: