JavaScript 性能优化,把握内存管理

106 阅读5分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情

这里我们来看一下 JavaScript 内存管理相关的内容。随着近些年硬件技术的不断发展,同时高级编程语言当中也都自带了 GC 机制。所以这样的一些变化就让我们在不需要特别注意内存空间使用的情况下,也能够去正常的完成相应的功能开发。

那么为什么在这里我们一定要去重提内存管理呢?下面我们就通过一段极简单的代码来进行说明。

实例说明


funtion fn(){
    arrList=[]
    arrlist[10000]='itbbfx is a coder'
}

fn()

首先我们在这样的一个地方定义了一个普通的函数 fn(), 然后我们在函数体内去声明了一个数组。紧接着我们去给数组赋值。需要注意的就是我们在赋值的时候刻意选择了一个比较大的数字来作为下标。这样做的目的,也就是为了当前这个函数在调用的时候,可以向我们的内存尽可能多的申请一比较大的空间。然后我们在执行这个函数过程中,其实从语法上来说,它是不存在任何问题的。

不过当我们用相应的一个性能监测工具,来在这个脚本执行过程中对它的内存进行监控的时候,我们会发现,那么它的内存变化就跟我们当前图示中所看到的这样一个蓝色线条一样,它是持续升高的。那么在这个过程当中并没有看到回落,那么这代表着什么呢?非常简单,这就是一个内存泄露。

image.png

至于说它如何泄露呢,我们现在不需要纠结,我们只是想在这儿去声明。如果说我们在写代码的时候,不够了解内存管理的一些机制,那么从而就会让我们去编写出一些不容易察觉到的内存问题性代码。

那么像这种的代码多了以后,那么给我们程序带来的可能就是一些意想不到的 bug,所以掌握内存的管理还是非常有必要的。

内存管理介绍

因此接下来我们就去看一下什么是内存管理。从我们当前这样一个词语本身来说,内存其实就是由可读写的单元组成,它就表示一片可操作的空间。而管理在这儿我们想刻意强调的就是由人主动的去操作这片空间的申请、使用和释放。即使我们去借助了一些 API,但终归来说我们可以自主的去做这样一个事情。所以内存管理呢我们就认为是开发者可以主动的去向内存来申请空间、使用空间、并且去释放空间。

因此这个流程也就显得非常简单了。一共就三步,分别是申请、使用和释放。

介绍完了这些以后,我们就回到我们的javascript 当中。我们来看一下在 JavaScript 中,它是如何来完成内存管理的,其实和其他的语言是一样的。它也是分三步来执行这样一个过程,但是由于 ECMAScript 当中并没有提供相应的操作 ,所以 JavaScript 语言不能像 C 或者 C++ 语言那样,由开发者主动的去调用相应的 API 来完成这样一个空间的管理。

不过即使如此,它也不能影响我们去通过 JavaScript 脚本来演示当前在内部一个空间的生命周期是怎样完成的。

下面通过一段简单的 JavaScript 脚本演示一下,我们当前这样一个内存空间的生命周期是什么样子的。

在这里呢我们就通过一段简短的代码去把刚才我们所介绍的流程,在我们的javascript 当中去进行一个实现。

  • 首先我们需要去申请空间。
  • 其次我们要去使用空间。
  • 最后我们要去释放空间。
//申请空间
 let obj={}
 
 //使用空间
 obj.name='itbbfx'
 // 释放空间
 
 obj=null
 

在我们的 JavaScript 当中,由于我们并没有直接提供相应的操作 API,所以我们只能是在 JavaScript 的执行引擎去遇到变量定义语句的时候,自动分配给我们一个相应的空间。所以这个步骤我们就相当于是定一个变量。

比如在这儿呢,我们采用 let 定一个 obj,然后我们把它指向一个空对象。

然后紧接着对它的使用其实就是一个读写的操作,所以这个时候我们可以直接往我们这个对象里边写入一个具体的数据就可以了。比如写上一个 ‘itbbfx’ 。

完成这个操作以后,我们的最后就是可以对它进行释放。同样的,JavaScript 里边并没有相应的释放 API,所以我们可以采用一种间接的方式来完成释放。比如将 obj 设置为 null。

那这个时候就相当于是我们按照内存管理的一个流程,在 JavaScript 当中去实现了这样一个内存管理。