内存 && 内存泄露

内存占用:

  1. allocate 分配内存(eg 声明变量
  2. 使用内存
  3. release 释放内存

内存泄漏:

造成内存泄露常见原因

内存监控 1-Task manager 任务管理器

内存监控 2-Devtools Performance 面板

1
2
3
4
5
6
7
8
9
10
11
12
//示例1:正常的内存占用与GC

var x = [];

function grow() {
for (var i = 0; i < 10000; i++) {
document.body.appendChild(document.createElement("div"));
}
x.push(new Array(1000000).join("x"));
}

setInterval(grow, 100);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//示例2:不可被GC的内存泄漏

function grow() {
// for (var i = 0; i < 10000; i++) {
// document.body.appendChild(document.createElement("div"));
// }
// x.push(new Array(1000000).join("x"));
var ul = document.createElement("ul");
for (var i = 0; i < 10; i++) {
var li = document.createElement("li");
ul.appendChild(li);
}
detachedTree = ul;
}

setInterval(grow, 1000);

内存监控 3-Devtools Memory 面板

  1. Heap snapshot堆快照,记录当前时间点内存中页面 js 对象和 dom 节点的分配情况
  2. Allocation instrumentation on timeline按时间轴记录内存,可以选记录内存分配调用栈(可以帮助定位到具体分配内存的源码)
  3. Allocation sampling使用抽样方法记录内存分配。具有最小的性能开销,可用于长时间运行的操作。提供了由 JavaScript 执行堆栈细分的良好近似分配。

扩展