【重温基础】22.内存管理

共计 5386 个字符，预计需要花费 14 分钟才能阅读完成。

本文是重温基础系列文章的第二十二篇。今日感受：优化学习方法。
系列目录：

【复习资料】ES6/ES7/ES8/ES9 资料整理 (个人整理)
【重温基础】1-14 篇
【重温基础】15.JS 对象介绍
【重温基础】16.JSON 对象介绍
【重温基础】17.WebAPI 介绍
【重温基础】18. 相等性判断
【重温基础】19. 闭包
【重温基础】20. 事件
【重温基础】21. 高阶函数

本章节复习的是 JS 中的内存管理，这对于我们开发非常有帮助。
前置知识绝大多数的程序语言，他们的内存生命周期基本一致：

分配所需使用的内存 ——（分配内存）
使用分配到的内存（读、写）——（使用内存）
不需要时将其释放归还 ——（释放内存）

对于所有的编程语言，第二部分都是明确的。而第一和第三部分在底层语言中是明确的。但在像 JavaScript 这些高级语言中，大部分都是隐含的，因为 JavaScript 具有自动垃圾回收机制（Garbage collected）。因此在做 JavaScript 开发时，不需要关心内存的使用问题，所需内存分配和无用内存回收，都完全实现自动管理。
1. 概述
像 C 语言这样的高级语言一般都有底层的内存管理接口，比如 malloc() 和 free()。另一方面，JavaScript 创建变量（对象，字符串等）时分配内存，并且在不再使用它们时“自动”释放。后一个过程称为垃圾回收。这个“自动”是混乱的根源，并让 JavaScript（和其他高级语言）开发者感觉他们可以不关心内存管理。这是错误的。——《MDN JavaScript 内存管理》
MDN 中的介绍告诉我们，作为 JavaScript 开发者，还是需要去了解内存管理，虽然 JavaScript 已经给我们做好自动管理。
2.JavaScript 内存生命周期
2.1 分配内存
在做 JavaScript 开发时，我们定义变量的时候，JavaScript 便为我们完成了内存分配：
var num = 100; // 为数值变量分配内存
var str = ‘pingan’; // 为字符串变量分配内存
var obj = {
name : ‘pingan’
}; // 为对象变量及其包含的值分配内存
var arr = [1, null, ‘hi’]; // 为数组变量及其包含的值分配内存

function fun(num){
return num + 2;
}; // 为函数（可调用的对象）分配内存

// 函数表达式也能分配一个对象
someElement.addEventListener(‘click’, function(){
someElement.style.backgroundColor = ‘blue’;
}, false);
另外，通过调用函数，也会分配内存：
// 类型 1. 分配对象内存
var date = new Date(); // 分配一个 Date 对象
var elem = document.createElement(‘div’); // 分配一个 DOM 元素

// 类型 2. 分配新变量或者新对象
var str1 = “pingan”;
var str2 = str1.substr(0, 3); // str2 是一个新的字符串

var leo2 = obj2.leo; // 引用“这个对象”的 leo 属性
可以看出，现在的“这个对象”已经有 2 个引用，一个是 obj2，另一个是 leo2。
obj2 = ‘hi’;
// 将 obj2 变成零引用，因此，obj2 可以被垃圾回收
// 但是它的属性 leo 还在被 leo2 对象引用，所以还不能回收

leo2 = null;
// 将 leo 变成零引用，这样 obj2 和 leo2 都可以被垃圾回收
这个算法有个限制：无法处理循环引用。即两个对象创建时相互引用形成一个循环。
function fun(){
var obj1 = {}, obj2 = {};
obj1.leo = obj2; // obj1 引用 obj2
obj2.leo = obj1; // obj2 引用 obj1
return ‘hi pingan’;
}
fun();

可以看出，它们被调用之后，会离开函数作用域，已经没有用了可以被回收，然而引用计数算法考虑到它们之间相互至少引用一次，所以它们不会被回收。
实际案例：在 IE6，7 中，使用引用计数方式对 DOM 对象进行垃圾回收，常常造成对象被循环引用导致内存泄露：
var obj;
window.onload = function(){
obj = document.getElementById(‘myId’);
obj.leo = obj;
obj.data = new Array(100000).join(”);
};
可以看出，DOM 元素 obj 中的 leo 属性引用了自己 obj，造成循环引用，若该属性（leo）没有移除或设置为 null，垃圾回收器总是且至少有一个引用，并一直占用内存，即使从 DOM 树删除，如果这个 DOM 元素含大量数据（如 data 属性）则会导致占用内存永远无法释放，出现内存泄露。
3.3 标记清除算法
这个算法，将“对象是否不再需要”定义为：对象是否可以获得。

标记清除算法，是假定设置一个根对象（root），在 JS 中是全局对象。垃圾回收器定时找所有从根开始引用的对象，然后再找这些对象引用的对象 … 直到找到所有可以获得的对象和搜集所有不能获得的对象。
它比引用计数垃圾收集更好，因为“有零引用的对象”总是不可获得的，但是相反却不一定，参考“循环引用”。
循环引用不再是问题：
function fun(){
var obj1 = {}, obj2 = {};
obj1.leo = obj2; // obj1 引用 obj2
obj2.leo = obj1; // obj2 引用 obj1
return ‘hi pingan’;
}
fun();
还是这个代码，可以看出，使用标记清除算法来看，函数调用之后，两个对象无法从全局对象获取，因此将被回收。相同的，下面案例，一旦 obj 和其事件处理无法从根获取到，他们将会被垃圾回收器回收。
var obj;
window.onload = function(){
obj = document.getElementById(‘myId’);
obj.leo = obj;
obj.data = new Array(100000).join(”);
};
注意：那些无法从根对象查询到的对象都将被清除。
3.4 个人小结
在日常开发中，应该注意及时切断需要回收对象与根的联系，虽然标记清除算法已经足够强壮，就像下面代码：
var obj,ele=document.getElementById(‘myId’);
obj.div = document.createElement(‘div’);
ele.appendChild(obj.div);
// 删除 DOM 元素
ele.removeChild(obj.div);
如果我们只是做小型项目开发，JS 用的比较少的话，内存管理可以不用太在意，但是如果是大项目（SPA，服务器或桌面应用），那就需要考虑好内存管理问题了。
4. 内存泄露（Memory Leak）
4.1 内存泄露概念
在计算机科学中，内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存。内存泄漏并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费。——维基百科
其实简单理解：一些不再使用的内存无法被释放。当内存占用越来越多，不仅影响系统性能，严重的还会导致进程奔溃。
4.2 内存泄露案例
全局变量
未定义的变量，会被定义到全局，当页面关闭才会销毁，这样就造成内存泄露。如下：
function fun(){
name = ‘pingan’;
};
未销毁的定时器和回调函数
如果这里举一个定时器的案例，如果定时器没有回收，则不仅整个定时器无法被内存回收，定时器函数的依赖也无法回收：
var data = {};
setInterval(function(){
var render = document.getElementById(‘myId’);
if(render){
render.innderHTML = JSON.stringify(data);
}
}, 1000);
闭包
var str = null;
var fun = function(){
var str2 = str;
var unused = function(){
if(str2) console.log(‘is unused’);
};
str = {
my_str = new Array(100000).join(‘–‘);
my_fun = function(){
console.log(‘is my_fun’);
};
};
};
setInterval(fun, 1000);
定时器中每次调用 fun，str 都会获得一个包含巨大的数组和一个对于新闭包 my_fun 的对象，并且 unused 是一个引用了 str2 的闭包。整个案例中，闭包之间共享作用域，尽管 unused 可能一直没有调用，但 my_fun 可能被调用，就会导致内存无法回收，内存增长导致泄露。
DOM 引用
当我们把 DOM 的引用保存在一个数组或 Map 中，即使移除了元素，但仍然有引用，导致无法回收内存。例如：
var ele = {
img : document.getElementById(‘my_img’)
};
function fun(){
ele.img.src = “http://www.baidu.com/1.png”;
};
function foo(){
document.body.removeChild(document.getElementById(‘my_img’));
};
即使 foo 方法将 my_img 元素移除，但 fun 仍有引用，无法回收。
4.3 内存泄露识别方法
浏览器
通过 Chrome 浏览器查看内存占用：

步骤如下：

打开开发者工具，选择 Timeline 面板
在顶部的 Capture 字段里面勾选 Memory

点击左上角的录制按钮
在页面上进行各种操作，模拟用户的使用情况
一段时间后，点击对话框的 stop 按钮，面板上就会显示这段时间的内存占用情况

如果内存占用基本平稳，接近水平，就说明不存在内存泄漏。

反之，就是内存泄漏了。

命令行
命令行可以使用 Node 提供的 process.memoryUsage 方法。
console.log(process.memoryUsage());
// {rss: 27709440,
// heapTotal: 5685248,
// heapUsed: 3449392,
// external: 8772 }
process.memoryUsage 返回一个对象，包含了 Node 进程的内存占用信息。该对象包含四个字段，单位是字节，含义如下。

rss（resident set size）：所有内存占用，包括指令区和堆栈。

heapTotal：” 堆 ” 占用的内存，包括用到的和没用到的。

heapUsed：用到的堆的部分。

external：V8 引擎内部的 C++ 对象占用的内存。

判断内存泄漏，以 heapUsed 字段为准。
参考文章

MDN JavaScript 指南内存管理
精读《JS 中的内存管理》
阮一峰老师 JavaScript 内存泄漏教程

本部分内容到这结束

Author
王平安

E-mail
pingan8787@qq.com

博客
www.pingan8787.com

微信
pingan8787

每日文章推荐
https://github.com/pingan8787…

JS 小册
js.pingan8787.com

微信公众号
前端自习课

【重温基础】22.内存管理

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）