【九月打卡】第2天 JS 垃圾回收-原创手记-慕课网

课程名称：2周刷完100道前端优质面试真题
课程章节：第5章前端面试技能拼图3 ：知识深度 - 原理和源码
主讲老师：双越

课程内容：
今天学习的内容包括：
5-4 -JS内存垃圾回收用什么算法最近学习
5-5 -【连环问】JS闭包是内存泄漏吗
5-6 -如何检测JS内存泄漏
5-7 -JS内存泄漏的场景有哪些
5-8 -JS内存泄漏的场景有哪些-扩展-WeakMap和WeakSet
主要是讲了垃圾回收是啥，什么情况下会出现，如何规避。

课程收获：
垃圾回收，即回收以及使用过用不着的变量。window.XX 有些数据外部引用的原因不能被回收。计划之外不能回收的即是内存泄漏了。

标记清除法

从根节点（或全局变量）往下去遍历，只要是能找到的，就标记一下。
其他的找不到的（即无用的、可回收的变量）就清除掉。

区别于引用计数。引用一次加一次，循环引用会出问题。

闭包不是内存泄漏

闭包内的变量没有被垃圾回收。要回收手动赋值 null。

内存变化监测

用 devTools performance 查看，最右侧清空，左侧开始录制。
图片描述

vue 里会出现内存泄漏场景

设置全局变量，设置全局函数，设置全局事件，使用定时器，自定义事件引用，组件销毁时要清除。
eg.

mounted() {
	window.arr = this.arr;
	window.printArr = () => {this.Fn()};
	this.timer = setInterval(() => {
		this.timerFn();
	}, 3000);
	window.addEventListener('resize', this.resizeFn);
	event.on('onChange', this.eventFn);
},
beforeUnmount() {
	window.arr = null;
	window.printArr = null;
	if (this.timer) {
		clearInterval(this.timer);
	}
	window.removeEventListener('resize', this.resizeFn);
	event.off('onChange', this.eventFn);
}

weakMap WeakSet

弱引用，不影响销毁。
key 必须是引用类型。没有size，length，无法用 foreach。用于对象间的关系。

一个正常的内存变化图：
图片描述