理解JavaScript的内存模型和事件循环

所有的编程语言都会存在内存生命周期,不同的是 部分语言会暴露出来,比如C。而有些语言是将具体细节进行隐藏,用户只会看到变量定义,赋值,对象的创建,不会关注变量创建的时候,内存如何处理,比如Java和JavaScript 。 接下来, 简单描述一下Js的内存

先简单说一下,JavaScript的内存结构
  • JavaScript的内存结构
    之前的博客,在说Js上下文对象时,简单提到了Javascript的上下文对象,和函数执行时栈结构,接下来,说一下,整个Js如何设计内存结构 , 如下图所示
    在这里插入图片描述
    Stack :
    Js的栈结构,和Java类似,栈中主要存放一些基本类型的变量和对象的引用。在JavaScript中“one thread === one call stack == one thing at a time”

    Heap
    JavaScript中的堆

    Queue
    用于存放异步任务与定时任务

  • 内存模型介绍
    和JVM内存结构类似,都存在堆栈区, 堆区存放一系列对象 ;栈区主要存放基本变量和一些对象的引用。不同的是 JavaScript不需要本地方法栈、常量池等,此外为了处理事件,Javascript还需一个Queue处理事件
    在这里插入图片描述

  • 用户接口 (user interface )
    用户提供在不同场景下都具有价值的功能,比如下边的一些浏览器工具栏按钮,具体细节参考 MDN
    在这里插入图片描述

  • Js运行内存 (JavaScript Runtime)
    Call Stack :
    下边是英文原文描述,翻译过来就是, 调用堆栈(Call Stack)是一种解释器机制,Js脚本中方法执行的trace , 包括当前执行的函数和已经被调用的函数 ,这点和Java的方法栈类似

    A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc

    之前讲Js执行上下文时,提到, 当执行一个函数时,会把对应函数的执行上下文压入方法栈顶,如果在该方法中在调用到其他函数会把其他函数的上下文压入栈顶 ,方法执行结束,会从栈顶弹出对应的上下文

    Heap :
    就是JavaScipt中用来存放对象的,和Java类似,就不多介绍了

  • 浏览器接口 (Web Apis)

    When writing code for the Web, there are a large number of Web APIs available. Below is a list of all the APIs and interfaces (object types) that you may be able to use while developing your Web app or site.

    上边是MDN中对Wep APIS 描述,简单理解就是,浏览器接口是浏览器提供给开发者用来编写网站或者Web等, 很多接口,可以参考 Web APIS | MDN

    下图中是包含的一些接口,比如圈起来的 Canvas 接口
    在这里插入图片描述

  • 事件循环 (Event loop)

    上边图片中,比如 DOM操作、网络操作、定时器队列等,接下来的内容会在下片博文 中描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值