您的位置:首页 > Web前端 > JavaScript

JavaScript 运行机制:Event Loop,堆、栈、队列以及宏任务、微任务

2019-01-11 00:15 381 查看

1、首先,由于Javascript是单线程这个本质才会有接下来的一系列下文。

2、堆、栈、队列:

      堆:堆是在程序运行时,而不是在程序编译时,动态申请某个大小的内存空间,即动态分配内存。

      栈:简言之:‘使用堆的一种方法’(先进后出)。

      队列:是一种先进先出的线性数据结构。

区别:

  •     空间分配: 堆:一般由程序员释放,如果程序员不释放就会在结束时由OS回收;栈:一般由操作系统自动分配释放;
  •     缓存方式: 堆:存放在二级缓存中,生命周期一般是由虚拟机的垃圾回收算法决定的;栈:存放在一级缓存中,被调用时处于存储空间,调用完立即释放。
  •     操作数据:堆栈(先进后出),队列(先进先出);

3、EventLoop(事件循环)

      由于js是单线程的所以js所有任务分为两种:同步任务和异步任务。

      同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;

      异步任务:异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

     事件循环:就是同步任务进入主线程,异步任务加入到任务队列中。等主线程的任务执行完就去执行任务队列中的任务,这个过程会不断重复。(如下图所示)

4、宏任务和微任务

      任务队列又分为宏任务和微任务,宏任务队列可以有多个、微任务队列只有一个。

      EventLoop执行步骤:我们代码开始执行都是从script(全局任务)开始,所以,一旦我们的全局任务(属于宏任务)执行完,就马上执行完整个微任务队列。

      宏任务:script(全局任务), setTimeout, setInterval, setImmediate, I/O, UI rendering;

      微任务:process.nextTick, Promise, Object.observer, MutationObserver;

5、最后给大家附一张我认为特别有价值的图帮助大家加深理解

   

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: