javascript中的内存管理

简介

在c语言中,我们需要手动分配和释放对象的内存,但是在java中,所有的内存管理都交给了java虚拟机,程序员不需要在手动进程内存的分配和释放,大大的减少了程序编写的难度。

同样的,在javascript中,内存管理也是自动进行的,虽然有自动的内存管理措施,但是这并不意味着程序员就不需要关心内存管理了。

本文将会进行详细的介绍javascript中的内存管理策略。

内存生命周期

对于任何程序来说,内存的生命周期通常都是一样的。

可以分为三步:

  1. 在可用空间分配内存
  2. 使用该内存空间
  3. 在使用完毕之后,释放该内存空间

所有的程序都需要手动执行第二步,对于javascript来说,第1,3两步是隐式实现的。

我们看下javascript中分配内存空间的例子。

通过初始化分配内存空间:

var n = 123; // 为数字分配内存
var s = 'azerty'; // 为String分配内存

var o = {
  a: 1,
  b: null
}; // 为对象分配内存

// 为数组分配内存
var a = [1, null, 'abra']; 

function f(a) {
  return a + 2;
} // 为函数分配内存 

通过函数调用分配内存空间:

var d = new Date(); // 通过new分配date对象

var e = document.createElement('div'); // 分配一个DOM对象

var s = 'azerty';
var s2 = s.substr(0, 3); // 因为js中字符串是不可变的,所以substr的操作将会创建新的字符串

var a = ['ouais ouais', 'nan nan'];
var a2 = ['generation', 'nan nan'];
var a3 = a.concat(a2); 
// 同样的,concat操作也会创建新的字符串 

释放空间最难的部分就是需要判断空间什么时候不再被使用。在javascript中这个操作是由GC垃圾回收器来执行的。

垃圾回收器的作用就是在对象不再被使用的时候进行回收。

JS中的垃圾回收器

判断一个对象是否可以被回收的一个非常重要的标准就是引用。

如果一个对象被另外一个对象所引用,那么这个对象肯定是不能够被回收的。

引用计数垃圾回收算法

引用计数垃圾回收算法是一种比较简单和简洁的垃圾回收算法。他把对象是否能够被回收转换成了对象是否仍然被其他对象所引用。

如果对象没有被引用,那么这个对象就是可以被垃圾回收的。

我们举一个引用计数的例子:

var x = { 
  a: {
    b: 2
  }
}; 
//我们创建了两个对象,a对象和a外面用大括号创建的对象。
// 我们将大括号创建的对象引用赋值给了x变量,所以x拥有大括号创建对象的引用,该对象不能够被回收。
// 同时,因为a对象是创建在大括号对象内部的,所以大括号对象默认拥有a对象的引用
// 因为两个对象都有引用,所以都不能够被垃圾回收

var y = x;  //我们将x赋值给y,大括号对象现在拥有两个引用

x = 1;   // 我们将1赋值给x,这样只有y引用了大括号的对象

var z = y.a;  // 将y中的a对象引用赋值给z,a对象拥有两个引用

y = 'flydean';  // 重新赋值给y,大括号对象的引用数为0,大括号对象可以被回收了,但是因为其内部的a对象还有一个z在被引用
                // 所以暂时不能被回收

z = null;       // z引用也被重新赋值,a对象的引用数为0,两个对象都可以被回收了 

引用计数的一个缺点就是可能会出现循环引用的情况。

考虑下面的一个例子:

function f() {
  var x = {};
  var y = {};
  x.a = y;        // x references y
  y.a = x;        // y references x

  return 'flydean';
}

f(); 

在上面的例子中,x中的a属性引用了y。而y中的a属性又引用了x。

从而导致循环引用的情况,最终导致内存泄露。

在实际的应用中,IE6 和IE7 对DOM对象使用的就是引用计数的垃圾回收算法,所以可能会出现内存泄露的情况。

var div;
window.onload = function() {
  div = document.getElementById('myDivElement');
  div.circularReference = div;
  div.lotsOfData = new Array(10000).join('*');
}; 

上面的例子中,DOM中的myDivElement元素使用circularReference引用了他本身,如果在引用计数的情况下,myDivElement是不会被回收的。

当myDivElement中包含了大量的数据的时候,即使myDivElement从DOM tree中删除了,myDivElement也不会被垃圾回收,从而导致内存泄露。

Mark-and-sweep回收算法

讲到这里,大家是不是觉得JS的垃圾回收算法和java中的很类似,java中也有引用计数和mark-and-sweep清除算法。

这种回收算法的判断标准是对象不可达。

在javascript中,通过扫描root对象(JS中的root对象那些全局对象),然后找到这些root对象的引用对象,然后再找到这些被引用对象的引用对象,一层一层的往后查找。

最后垃圾回收器会找到所有的可达的对象和不可达的对象。

使用不可达来标记不再被使用的对象可以有效的解决引用计数法中出现的循环引用的问题。

事实上,现在基本上所有的现代浏览器都支持Mark-and-sweep回收算法。

调试内存问题

如果发送了内存泄露,我们该怎么调试和发现这个问题呢?

在nodejs中我们可以添加--inspect,然后借助Chrome Debugger来完成这个工作:

node --expose-gc --inspect index.js 

上面的代码将会开启nodejs的调试功能。

我们看下输出结果:

Debugger listening on ws://127.0.0.1:9229/88c23ae3-9081-41cd-98b0-d0f7ebceab5a
For help, see: https://nodejs.org/en/docs/inspector 

结果告诉了我们两件事情,第一件事情就是debugger监听的端口。默认情况下将会开启127.0.0.1的9229端口。并且分配了一个唯一的UUID以供区分。

第二件事情就是告诉我们nodejs使用的调试器是Inspector。

使用Chrome devTools进行调试的前提是我们已经开启了 --inspect模式。

在chrome中输入chrome://inspect:

我们可看到chrome inspect的界面,如果你本地已经有开启inspect的nodejs程序的话,在Remote Target中就可以直接看到。

选中你要调试的target,点击inspect,即可开启Chrome devTools调试工具:

你可以对程序进行profile,也可以进行调试。

闭包Closures中的内存泄露

所谓闭包就是指函数中的函数,内部函数可以访问外部函数的参数或者变量,从而导致外部函数内部变量的引用。

我们看一个简单闭包的例子:

 function parentFunction(paramA)
 {
 var a = paramA;
 function childFunction()
 {
 return a + 2;
 }
 return childFunction();
 } 

上面的例子中,childFunction引用了parentFunction的变量a。只要childFunction还在被使用,a就无法被释放,从而导致parentFunction无法被垃圾回收。事实上Closure默认就包含了对父function的引用。

我们看下面的例子:

 

 

上面的例子中,obj引用了 DOM 对象element,而element的onclick是outerFunction的内部函数,从而导致了对外部函数的引用,从而引用了obj。

这样最终导致循环引用,造成内存泄露。

怎么解决这个问题呢?

一个简单的办法就是在使用完obj之后,将其赋值为null,从而中断循环引用的关系:

 

 

还有一种很简洁的办法就是不要使用闭包,将其分成两个独立的函数:

 

 

本文作者:flydean程序那些事

本文链接:http://www.flydean.com/js-memory-management/

本文来源:flydean的博客

欢迎关注我的公众号:「程序那些事」最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧等你来发现!

javascript中的内存管理的更多相关文章

  1. 原生JavaScript实现轮播图

    本文实例为大家分享了JavaScript实现轮播图的具体代码,供大家参考,具体内容如下效果:代码:* {margin......

  2. JavaScript 如何禁止用户保存图片

    场景 在业务需求中不希望用户保存图片,因为是一些供内部使用的图片。 思路 添加事件禁止选择、拖拽、右键(简单的禁......

  3. JavaScript this关键字的深入详解

    一、前言this关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字,被自动定义在所有函数的作用域......

  4. 深入理解Js中的this

    深入理解Js中的thisJavaScript作用域为静态作用域static scope,但是在Js中的this却是一......

  5. JavaScript 中的六种循环方法

    Javascript中的遍历循环1.for循环对于数值索引的数组来说,可以使用标准的for循环来遍历值const a......

  6. js面向对象封装级联下拉菜单列表

    本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素。点击文本框后,显示一级菜单。如果菜单中包含子菜单,菜......

  7. 原生javascript开发计算器实例

    计算器的主要作用是进行数字运算,开发一个计算器功能的web实例,有助于更好的掌握js基础的数字运算能力。本实例旨在帮......

  8. javascript中的内存管理

    目录简介内存生命周期JS中的垃圾回收器引用计数垃圾回收算法Mark-and-sweep回收算法调试内存问题闭包Clo......

  9. javascript 数组(list)添加/删除的实现

    javascript 数组Array(list)添加/删除unshift:将参数添加到原数组开头,并返回数组的长度p......

  10. 细说 js 的7种继承方式

    在这之前,先搞清楚下面这个问题:function Father(){} Father.prototype.na......

随机推荐

  1. Android实现微信摇一摇功能

    本文实例为大家分享了Android实现微信摇一摇功能的具体代码,供大家参考,具体内容如下1、初始化界面设置摇一摇界面......

  2. java自定义注解验证手机格式的实现示例

    1、@Valid与@Validated的区别1.1 基本区别@Valid:Hibernate validation校......

  3. 基于Python的接口自动化-读写excel文件

    引言使用python进行接口测试时常常需要接口用例测试数据、断言接口功能、验证接口响应状态等,如果大量的接口测试用例......

  4. 深入解析vue响应式原理

    摘要:本文主要通过结合vue官方文档及源码,对vue响应式原理进行深入分析。1.定义作为vue最独特的特性,响应式可......

  5. Java-web易混淆知识点整理

    Java-web易混淆知识点:post和get区别,相对路径和绝对路径,重定向和请求转发区别,Cookie和sess......

  6. Java语法糖详解

    语法糖语法糖(Syntactic Sugar),也称糖衣语法,是由英国计算机学家 Peter.J.Landin 发明......

  7. Java高并发BlockingQueue重要的实现类详解

    ArrayBlockingQueue有界的阻塞队列,内部是一个数组,有边界的意思是:容量是有限的,必须进行初始化,指......

  8. Java Object类 和 String类 常见问答

    Java常见对象 Object类 和 String类 常见问答 6k字+总结写在最前面这个项目是从20年末就立好的 ......

  9. Java多线程总结(二)

    四.Java多线程的阻塞状态与线程控制上文已经提到Java阻塞的几种具体类型。下面分别看下引起Java线程阻塞的主要......

  10. C#9.0:Init相关总结

    背景在以前的C#版本里面,如果需要定义一个不可修改的的类型的做法一般是:声明为readonly,并设置为只包含get......