浏览器垃圾回收机制

浏览器的垃圾回收机制(Garbage collection
), 简称 GC, 它会周期性运行以释放那些不需要的内存, 否则, JavaScript 的解释器将会耗尽全部系统内存而导致系统崩溃。具体到浏览器中的实现, 通常有两个策略: 标记清除和引用计数。

引用计数法

此算法把“对象是否不再需要”简化定义为“对象有没有其他对象引用到它”。如果没有引用指向该对象(零引用), 对象将被垃圾回收机制回收。引用计数法是最初级的垃圾收集算法, 如果某对象没有其他对象指向它了, 那就说明它可以被回收。但是它无法处理循环引用的问题。我们执行 f 函数, 它返回了一个数字, 和内部的 o1,o2 没什么关系, 但是对引用计数法来说, o1,o2 它们之间还存在着相互引用, 并不会被回收。这就造成了内存泄漏。

标记清除法

这个算法把“对象是否不再需要”简化定义为“对象是否可以获得”。
从 2012 年起, 所有现代浏览器都使用了标记-清除垃圾回收算法。标记清除法假定存在一个根对象(相当于 js 的全局对象), 垃圾回收器将定期从根对象开始查找, 凡是从根部出发能扫描到的都会保留, 扫描不到的将被回收。

内部流程

  • 垃圾收集器找到所有的根, 并“标记”(记住)它们。
  • 然后它遍历并“标记”来自它们的所有引用。
  • 然后它遍历标记的对象并标记 它们的 引用。所有被遍历到的对象都会被记住, 以免将来再次遍历到同一个对象。
  • ……如此操作, 直到所有可达的(从根部)引用都被访问到。
  • 没有被标记的对象都会被删除。

几种常见的内存泄漏

  1. 全局变量

    全局变量什么时候需要自动释放内存空间很难判断, 所以在开发中尽量避免使用全局变量, 以提高内存有效使用率。

  2. 未移除的事件绑定

    dom 元素虽然被移除了, 但元素绑定的事件还在, 如果不及时移除事件绑定, 在 IE9 以下版本容易导致内存泄漏。现代浏览器不存在这个问题了, 了解一下即可

  3. 定时器 setInterval/setTimeout

    看下面的一段定时器代码, 一旦我们在其它地方移除了 node 节点, 定时器的回调便失去了意义, 然而它一直在执行导致 callback 无法回收, 进而造成 callback 内部掉数据 resData 也无法被回收。所以我们应该及时 clear 定时器。

    let resData = 100;
    let callback = function () {
      let node = document.querySelecter(".p");
      node && (node.innerHTML = resData);
    };
    setInterval(callback, 1000);

WeakMap、WeakSet

es6 的 WeakMap 和 Map 类似, 都是用于生成键值对的集合, 不同的是 WeakMap 是一种弱引用, 它的键名所指向的对象, 不计入垃圾回收机制, 另外就是 WeakMap 只接受对象作为键名(null 除外), 而 Map 可以接受各种类型的数据作为键。

WeakMap 这种结构有助于防止内存泄漏, 一旦消除对键的引用, 它占用的内存就会被垃圾回收机制释放。WeakMap 保存的这个键值对, 也会自动消失。包括 WeakSet 也是类似的, 内部存储的都是弱引用对象, 不会被计入垃圾回收。

看一个阮一峰 ES6 文档上举的例子:

let myWeakmap = new WeakMap();

myWeakmap.set(document.getElementById("logo"), { timesClicked: 0 });

document.getElementById("logo").addEventListener(
  "click",
  function () {
    let logoData = myWeakmap.get(document.getElementById("logo"));
    logoData.timesClicked++;
  },
  false
);

上面代码中, 我们将 dom 对象作为键名, 每次点击, 我们就更新一下状态。我们将这个状态作为键值放在 WeakMap 里。一旦这个 DOM 节点删除, 该状态就会自动消失, 不存在内存泄漏风险。

WeakSet 和 WeakMap 类似, 它和 set 结构的区别也是两点:

WeakSet 中的对象都是弱引用, 不会被计入垃圾回收
成员只能是对象, 而不能是其他类型的值
所以从垃圾回收的角度来看, 合理的使用 WeakMap 和 WeakSet, 能帮助我们避免内存泄漏。

浏览器工作原理

MDN 链接


作者: Kavience 本文链接: http://www.kavience.com/frontend/other-concepts-of-frontend-interview-questions-continuous-update.html 转载请注明:《前端面试题之其它概念(持续更新)》转自 http://www.kavience.com/frontend/other-concepts-of-frontend-interview-questions-continuous-update.html,原作者:Kavience 版权声明: 自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)