通常情况下,垃圾数据回收分为 手动回收策略,何时分配内存、何时销毁内存都是由代码控制的。 自动回收策略,产生的垃圾数据是由垃圾回收器来释放的,并不需要手动通过代码来释放。 JavaScript 中调用栈中的数据回收 JavaScript 引擎会通过向下移动 ESP(记录当前执行状态的指针) 来销毁该函数保存在栈中的执行上下文。 JavaScript 堆中的数据回收 在 V8 中会把堆分为 新生区通常只支持 1~8M 的容量,而老生区支持的容量就大很多了。对于这两块区域,V8 分别使用两个不同的垃圾回收器,以便更高效地实施垃圾回收。
不论什么类型的垃圾回收器,它们都有一套共同的执行流程。
新生代中垃圾回收 新生代中用 在垃圾回收过程中,首先要对对象区域中的垃圾做标记;标记完成之后,就进入垃圾清理阶段,副垃圾回收器会把这些存活的对象复制到空闲区域中,同时它还会把这些对象有序地排列起来,所以这个复制过程,也就相当于完成了内存整理操作,复制后空闲区域就没有内存碎片了。 完成复制后,对象区域与空闲区域进行角色翻转,也就是原来的对象区域变成空闲区域,原来的空闲区域变成了对象区域。这样就完成了垃圾对象的回收操作,同时这种 为了执行效率,一般新生区的空间会被设置得比较小,也正是因为新生区的空间不大,所以很容易被存活的对象装满整个区域。为了解决这个问题,JavaScript 引擎采用了 老生代中的垃圾回收 老生代中用 清除算法后,会产生大量不连续的内存碎片。而碎片过多会导致大对象无法分配到足够的连续内存,于是又产生了 全停顿 由于 JavaScript 是运行在主线程之上的,一旦执行垃圾回收算法,都需要将正在执行的 JavaScript 脚本暂停下来,待垃圾回收完毕后再恢复脚本执行。我们把这种行为叫做 在 V8 新生代的垃圾回收中,因其空间较小,且存活对象较少,所以全停顿的影响不大,但老生代就不一样了。如果执行垃圾回收的过程中,占用主线程时间过久,主线程是不能做其他事情的。比如页面正在执行一个 JavaScript 动画,因为垃圾回收器在工作,就会导致这个动画在垃圾回收过程中无法执行,这将会造成页面的卡顿现象。 为了降低老生代的垃圾回收而造成的卡顿,V8 将标记过程分为一个个的子标记过程,同时让垃圾回收标记和 JavaScript 应用逻辑交替进行,直到标记阶段完成,我们把这个算法称为 使用增量标记算法,可以把一个完整的垃圾回收任务拆分为很多小的任务,这些小的任务执行时间比较短,可以穿插在其他的 JavaScript 任务中间执行,这样当执行上述动画效果时,就不会让用户因为垃圾回收任务而感受到页面的卡顿了。 不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)。 内存泄漏发生的原因 有时候为了方便数据的快捷复用,我们会使用缓存,但是缓存必须有一个大小上限才有用。高内存消耗将会导致缓存突破上限,因为缓存内容无法被回收。 3. 全局变量 除了常规设置了比较大的对象在全局变量中,还可能是意外导致的全局变量,如: function foo(arg) { 在函数中,没有使用 var/let/const 定义变量,这样实际上是定义在
这种函数,在window作用域下被调用时,函数里面的 先看如下代码: var someData = getData(); 这里定义了一个计时器,每隔1s把一些数据写到Node节点里面。但是当这个Node节点被删除后,这里的逻辑其实都不需要了,可是这样写,却导致了计时器里面的回调函数无法被回收,同时,someData里的数据也是无法被回收的。 看以下这个闭包:
每次调用 即 因此,当这段代码反复运行,就会看到内存占用不断上升,垃圾回收器(GC)并无法降低内存占用。 本质上,闭包的链表已经创建,每一个闭包作用域携带一个指向大数组的间接的引用,造成严重的内存泄漏。 例如,Node.js 中 Agent 的 keepAlive 为 true 时,可能造成的内存泄漏。当 Agent keepAlive 为 true 的时候,将会复用之前使用过的 socket,如果在 socket 上添加事件监听,忘记清除的话,因为 socket 的复用,将导致事件重复监听从而产生内存泄漏。 内存泄漏的识别方法
点击右上角主菜单,选择 下面两列可以告诉您与页面的内存使用有关的不同信息:
当你页面稳定下来之后,这两个的值还在上涨,你就可以查一查是否内存泄漏了。
Performance(时间轴)能够面板直观实时显示JS内存使用情况、节点数量、监听器数量等。 打开 chrome 浏览器,调出调试面板(DevTools),点击 录制结果如图 首先,从图中我们可以看出不同颜色的曲线代表的含义,这里主要关注JS堆内存、节点数量、监听器数量。鼠标移到曲线上,可以在左下角显示具体数据。在实际使用过程中,如果您看到这种 JS 堆大小或节点大小不断增大的模式,则可能存在内存泄漏。
只有页面的 DOM 树或 JavaScript 代码不再引用 DOM 节点时,DOM 节点才会被作为垃圾进行回收。如果某个节点已从 DOM 树移除,但某些 JavaScript 仍然引用它,我们称此节点为“已分离”,已分离的 DOM 节点是内存泄漏的常见原因。 同理,调出调试面板,点击 <html><head></head><body><button id='createBtn'>增加节点</button><script> var detachedNodes;function create() { var ul = document.createElement('ul'); for (var i = 0; i < 10; i++) { var li = document.createElement('li'); 点击几下,然后记录。可以得到以下信息: 旧版的面板,还会有颜色标注,黄色的对象实例表示它被JS代码引用,红色的对象实例表示被黄色节点引用的游离节点。上图是新版本的,不会有颜色标识。但是还是可以一个个来看,如上图,点开节点,可以看到下面的引用信息,上面可以看出,有个HTMLUListElement(ul节点)被window.detachedNodes引用。再结合代码,原来是没有加var/let/const声明,导致其成了全局变量,所以DOM无法释放。
ps: chrome 旧版的浏览器,这个功能在 操作步骤:点start->在页面进行你要检测的操作->点stop。 DevTools 按函数显示内存分配明细。默认视图为 Heavy (Bottom Up),将分配了最多内存的函数显示在最上方,还有函数的位置,你可以看看是哪些函数占用内存较多。 避免内存泄漏的方法
这种情况下,一旦消除对该节点的引用,它占用的内存就会被垃圾回收机制释放。Weakmap 保存的这个键值对,也会自动消失。 基本上,如果你要往对象上添加数据,又不想干扰垃圾回收机制,就可以使用 WeakMap。
|
|