JS堆、栈&EventLoop

  |  
 阅读次数

JS内存机制

  • 栈内存(stack)
    • 基础数据类型[Number, String, Boolean, Null, Undefined, Symbol]
    • function 函数
    • 数据在 栈内存 储存/使用 类似数据结构 中 堆栈数据结构, 遵循后进先出/先进后出
  • 堆内存(heap)
    • 引用数据类型[Array, Object, Map, Set, …]
    • 访问:从栈中获取了该对象的地址引用(或者地址指针)

浏览器事件机制(EventLoop)

  • 所有同步任务都在主线程上执行, 形成一个执行栈
  • 主线程外, 存在一个 任务队列. 异步任务运行出结果, 任务队列放置事件
  • 执行栈 同步任务执行完毕, 系统读取任务队列, 并放入 执行栈
  • 主线程从 任务队列读取事件, 过程循环不断(EventLoop)

队列=>宏任务/微任务

概念:微任务和宏任务都是属于队列,而不是放在栈中

  • 宏任务(task)
    • 新建 任务队列
  • 微任务(Microtasks)
    • 在当前队列执行任务,减小性能开销

总结

  • 栈:
    • 存储 基础数据类型
    • 按值访问
    • 存储的值大小固定
    • 由系统自动分配内存空间
    • 空间小, 运行效率高
    • 先进后出, 后进先出
    • 栈中 DOM, ajax, setTimeout 依次进入队列,栈中代码执行完毕,再将队列事件放入执行栈
    • 宏任务/微任务
  • 堆:
    • 存储 引用数据类型
    • 按引用访问
    • 存储的值 大小不定,可动态调整
    • 主要用来存放 对象
    • 空间大 运行效率相对较低
    • 无序存储,可根据引用直接获取