可视化分析js的内存分配与回收

之前写了一篇文章浏览器是怎么看闭包的,发现有些读者对js内存分配与回收懵懵懂懂,理解文章的配图有些困难,我想主要是因为配图省略了一些细节。今天专门写一篇关于js内存分配回收的文章,帮助大家理解js代码的内存表示。原文备份在这里

数据类型

先唠叨些基本知识:

  • javascript的数据类型分为基本类型和引用类型(对象)。基本类型分为如下几种:
    • 数字字面量
    • 字符串字面量
    • 布尔字面量
    • undefined
    • null
  • 引用类型分为如下几种
    • 通过new的方式生成的对象
      • new Object()
      • new Array()
      • new RegExp()
      • new String()
      • new Number()
      • new Bollean()
      • new 自定义对象()
    • {},[],正则字面量,函数。

简单对象的内存表示

我们都知道的是,javascript中值类型是在变量所在的内存单元中存放的,而对于引用类型的对象,变量所在的内存单元存放的是堆空间中对象的内存地址。我们还应该知道的是,函数在执行时,局部变量是在栈空间中创建,引用对象是在堆空间中创建的。

我们还是从代码入手:

var a = 'abc'
var b = 123
var c = true
var d = undefined
var e = null
var f = {n: 'test'
}

这段代码我们定义了六个全局变量,每个变量赋予不同类型的值,我们发现,a、b、c、d、e基本类型的值占据一个内存单元,而变量f内存储的是堆中对象的地址。如下图表示:

变量f中存储的0x00012345是堆中对象的内存地址。

一切都很容易理解。细心的同学也许会指出,null也是对象,通过typeof null 表达式得到的结果是'object'。关于这个,我想说的是typeof null = 'object' 这个现象是历史遗留bug。事实上null是空值,并不是对象。

js的类型值有1-3位是表示类型,其它位表示真实值。
000: object. The data is a reference to an object.
也就是说,000开头的被认为是指向对象引用。由于js中的null是空指针,在大多数平台上空指针的前两位是0x00,再加上null的数值表示是0,所以null的前三位是0x000,js引擎会认为它是指向对象的引用,这是一个历史遗留bug。但事实上,null是空值。详细解释参见这里。

说到null,我们还要用图形表示一下null所起到的作用。对于上面的代码,我们将引用类型f置为null,该变量将不再指向堆中对象。图形表示如下:

你会发现,原本f指向堆对象的线消失了,堆中对应的对象不再被f引用。

看到这里,你也许会问:咦,那没有任何对象指向那个堆对象了,它还占据内存吗?如果还占据的话,岂不是占着茅坑不那啥吗?我想,如果能想到这一点,说明你是一个有追求的js开发者。

是的,原本堆空间中的那个对象确实没有引用了,js引擎会在下一个垃圾回收节点将它回收掉。

为了帮助大家更好的理解内存的分配与释放,建议大家在看配图的时候,一定要谨记箭头的走向,认真看箭头从哪个对象出发,又是指向哪个对象的。因为箭头指向代表变量引用,而引用是垃圾回收器辨别内存垃圾的依据。什么是垃圾呢?按照垃圾回收器的理解是,从根对象触发,沿着箭头指向,能够找到的对象,都不应该判定为垃圾。相反,从根对象触发,沿着箭头指向,不能够找到的对象,被判定为垃圾,将在下一个垃圾回收节点回收掉。
那么,与之相伴的是内存泄漏,什么叫内存泄漏呢?通俗一点讲,就是某个对象已经不会再被我们用到,但是垃圾回收器却发现从根对象仍然能够找到它,所以不认为它是垃圾,因此不会回收它,但是它确实对我们没有用处。这样就造成了内存的浪费,这种现象称作内存泄漏。

理解了判定内存垃圾的方式以及内存泄漏,我们就可以通过画图的方式来检验代码是否存在内存泄漏,代码是否健壮。

复杂对象的内存表示

上面代码中,f指向的对象是一个简单对象,只包含一个属性,如果堆中的是一个复杂对象,又该如何表示呢?让我们继续看代码

var a = {b: 123,c: 'abc',d: true,e: null,f: {h: 'test',j: {k: 567}}
}

我们定义了一个全局变量a,指向堆内存中的一个复杂对象。如下图:

全局定义的变量是常驻内存的,为什么常驻内存?我们从垃圾回收的角度分析一下:

  • 从根对象window沿着箭头寻找,首先找到a。
  • 通过a能找到堆中最左侧的大对象。
  • 通过最左侧的对象中的变量f,能找到右侧下方的对象。
  • 通过右侧下方对象的变量j,能找到右侧上方对象。

所以,全局定义的变量a所关联的对象是常驻内存的。
再次思考一下,我们如何让垃圾回收器回收堆空间右侧的那两个对象呢?聪明的你也许想到了

a.f = null

是的,将a.f的指针置为null就可以了。我们从垃圾回收的角度分析一下,a.f = null这段代码执行以后,f变量中存储的值变成了null,不再指向右侧的两个对象,按照我们之前的方法,从根对象window开始,沿着箭头寻找,找不到右侧对象,所以右侧两个对象成为内存垃圾,将被GC(垃圾回收器)回收掉。这就是当我们为一个变量赋值null之后,变量在内存中的变化。如下图所示:

当然,我们也可以为变量赋予其他基础类型的值,断开和堆中对象的联系。

函数定义的内存表示

对于再复杂的对象,大家可以举一反三。接下来,我们看一下函数的定义:

function say() {var a = '测试'var b = {c: 123}
}

可以看到函数对象指针在全局变量区,函数本身在堆中存放,函数我只画了了几个常见的属性。细心的你也许发现有个[[Socpes]]的属性,以后讲闭包的时候再对它作详细介绍,这里只大概介绍一下。

[[Scopes]]属性是在函数创建的时候附加的属性,代表该函数的作用域链。

函数运行时的内存表示

继续看一段代码:

function say() {var a = '测试'var b = {c: 123}
}
say()

很简单,我们定义一个函数,并执行它,变量的内存图如下:

函数运行时,局部变量分配在栈空间,此时,外部window对象与栈空间中的变量没有引用关系。局部变量a是值类型,在栈中存放,局部变量b是引用类型,栈中存放对象在堆中的内存地址。

函数运行结束后的图示如下:

函数运行结束,局部变量由于没有外部引用,所以全部释放,同时堆中的对象也失去了引用,成为内存垃圾,被GC回收掉。

结语

至此,关于js代码的内存表示就先告一段落,通过画图的方式,希望大家能对程序的执行有感性的理解,也希望能帮助大家通过画图的方式去判定内存垃圾。另外,大家在看下一篇文章浏览器是怎么看闭包的的时候,会发现有一些细节没有表示,大家不要太过于纠结,只需注意箭头走向即可。


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366490.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记录程序写入日志_终于有人把MySQL 三大日志讲清楚了

点击上方"蓝字",关注了解更多日志是 mysql 数据库的重要组成部分,记录着数据库运行期间各种状态信息。mysql日志主要包括错误日志、查询日志、慢查询日志、事务日志、二进制日志几大类。作为开发,我们重点需要关注的是二进制日志( …

在ADF实体PK属性中使用MySQL自动增量PK列

大家好。 继续进行ADF MySQL解决方法系列,今天我们将看到要使用MySQL PK自动增量列和ADF实体PK属性来进行的工作。 如果使用的是Oracle数据库,则可以使用oracle.jbo.domain.DBSequence以及序列和触发器来立即进行操作。 为简单起见,我们将修…

HBuilder的快捷操作

1.通过&#xff01;感叹号单击tab 就可以快速生成&#xff1a; <!DOCTYPE html><html lang"zh"><head> <meta charset"UTF-8" /> <meta name"viewport" content"widthdevice-width, initial-scale1.0" /&g…

14.正则表达式、re模块、元字符

正则表达式 一、正则表达式所面向的问题 1、判断一个字符串是否匹配给定的格式 判断用户注册帐号是否满足格式 2、从一个字符串中按指定格式提取信息 抓取页面中的链接 二、判断用户提交的邮箱的格式是否正确 三、抓取页面中特定部分数据 er模块 1、findall方法&a…

WeScale 技术篇 —— mpvue 与微信小程序的火花

介绍项目介绍WeScale 定位为音乐训练小程序&#xff0c;初期规划了基础音阶的三个训练&#xff0c;以及他们的镜像模式。数字简谱字母简谱数字简谱对字母简谱后期看情况更新追加其他训练。产品展示扫描下方小程序码或在微信小程序中搜索 WeScale&#xff0c;即可使用。人员介绍…

使用Maven程序集创建漏洞评估工件

本文将讨论如何使用Maven程序集创建可提供给第三方漏洞评估站点&#xff08;例如Veracode &#xff09;进行审查的工件。 错误的静态分析与漏洞评估 在这一点上&#xff0c;每个人都知道findbug并虔诚地使用它&#xff0c;对吗&#xff1f; 对&#xff1f; Findbugs使用静态…

洛谷 P3835: 【模板】可持久化平衡树

题目传送门&#xff1a;洛谷P3835。 题意简述&#xff1a; 题面说的很清楚了。 题解&#xff1a; 考虑建立一棵每个节点都表示一个版本的树。 以初始版本 \(0\) 为根。对于第 \(i\) 个操作&#xff0c;从 \(v_i\) 向 \(i\) 连一条边&#xff0c;而边权则是 \(opt_i\) 和 \(x_i\…

自动论文生成器 python_Python生成器常见问题及解决方案

在Python中&#xff0c;生成器和函数很像&#xff0c;都是在运行的过程中才会去确定各种变量的值&#xff0c;所以在很多情况下&#xff0c;会导致各种各样的问题。def generator_test1():# 0...9 generatorx (i for i in range(10))# 5..9 generatorx_filter filter(lambda …

025 SSM简单搭建

参考了同事的文档&#xff0c;自己也写一篇文档。 同时&#xff0c;补充了一下&#xff0c;程序是如何运行的。 一&#xff1a;SSM框架 1.说明 SSM&#xff08;SpringSpringMVCMyBatis&#xff09;框架集由Spring、SpringMVC、MyBatis三个开源框架整合而成&#xff0c;常作为数…

让Vue也可以使用Redux

上周末看Vuex源码&#xff0c;突发灵感&#xff0c;为什么都是Vuex啊。 于是蛋疼一下午写了一个插件来帮助Vue可以使用Redux Gayhub Url Vue-with-Redux 这是一个用于帮助Vue使用Redux管理状态的插件。Redux是一个非常流行的状态管理工具。vue-with-redux为大家提供一个可以…

Apache Camel –从头开始开发应用程序(第2部分/第2部分)

这是本教程的第二部分&#xff0c;我们将使用Apache Camel创建发票处理应用程序。 如果您错过了它&#xff0c;一定要看一下第一部分 。 以前&#xff0c;我们已经定义了系统的功能要求&#xff0c;创建了网关&#xff0c;分离器&#xff0c;过滤器和基于内容的路由器组件。 让…

上升沿_PLC上升沿,下降沿的理解

有网友留言说&#xff1a;上升沿就是在信号从断开到接通的那一瞬间接通&#xff0c;下降沿就是在信号从接通到断开的那一瞬间接通。但是现在的问题它的实际用处是用在哪一些情况。我身边也有PLC可以做个什么实验来体验一下呢&#xff1f;虽然说LD X0 PLS M0与LDP X0 out Y0…

内存的页面置换算法

在进程运行过程中&#xff0c;若其所要访问的页面不在内存而需把它们调入内存&#xff0c;但内存中已无空闲空间时&#xff0c;为了保证该进程能正常运行&#xff0c;系统必须从内存中调出一页程序或数据到磁盘的对换区中。但应将哪个页面调出&#xff0c;需根据一定的算法来实…

A - 装箱问题

Problem Description 一个工厂生产的产品形状都是长方体&#xff0c;高度都是h&#xff0c;主要有1*1&#xff0c;2*2&#xff0c;3*3&#xff0c;4*4&#xff0c;5*5&#xff0c;6*6等6种。这些产品在邮寄时被包装在一个6*6*h的长方体包裹中。由于邮费很贵&#xff0c;工厂希望…

非阻塞式异步Java 8和Scala的Try / Success / Failure

受Heinz Kabutz最近的时事通讯以及我在最近的书中研究的Scala的期货的启发&#xff0c;我着手使用Java 8编写了一个示例&#xff0c;该示例如何将工作提交给执行服务并异步地响应其结果&#xff0c;并使用了回调。无需阻止任何线程等待执行服务的结果。 理论认为&#xff0c;调…

中找不到iedis_CAD图纸中缺少的字体实在找不到怎么办呢?

在使用浩辰CAD软件打开图纸文件的时候经常提示缺少字体这是什么原因呢&#xff1f;怎么解决这个问题呢&#xff1f;其实打开CAD图纸时提示缺少字体是比较常见的情况&#xff0c;但是很多常见的字体也提示缺失是为什么呢&#xff1f;因为这些字体很显然是被人改过名字了&#xf…

Xamarin Essentials教程使用指南针Compass

Xamarin Essentials教程使用指南针Compass指南针是一种确定地理方向的工具。在手机应用程序中&#xff0c;指南针通过手机的磁力计确定磁北极&#xff0c;提供手机方向信息。在Xamarin中&#xff0c;开发者可以使用Xamarin.Essentials中的静态类 Compass&#xff0c;获取方向信…

Java 8中的instanceof运算符和访客模式替换

我有一个梦想&#xff0c;不再需要操作员和垂头丧气的instanceof &#xff0c;却没有访客模式的笨拙和冗长。 所以我想出了以下DSL语法&#xff1a; Object msg //...whenTypeOf(msg).is(Date.class). then(date -> println(date.getTime())).is(String.class). then(…

1023 Have Fun with Numbers

因为最多有20个字符&#xff0c;int和long long都不行&#xff0c;所以只能用字符串操作。水题~ #include<iostream> #include<algorithm> #include<string.h> #define maxn 25 using namespace std; typedef long long ll; char s1[maxn]; int s2[maxn]; in…

前端生态混乱,AMPMIP在努力做标准化工作

作者 | Brilliant Open Web团队breezet 移动时代的前端似乎越来越混乱了&#xff0c;各种技术方案层出不穷&#xff0c;令开发者们目不暇接&#xff0c;不知如何选择。然而&#xff0c;生态越是混乱&#xff0c;对标准的呼唤就越强&#xff0c;因为只有标准化才能使得整个生态…