为什么使用Performance
-
GC的目的是为了实现内存空间的良性循环 - 良性循环的基石是合理使用
- 时刻关注才能确定是否合理
-
Performance提供多种监控方式
Performance使用步骤
- 打开浏览器输入目标网址
- 进入开发人员工具面板，选择
Performance（性能） - 开启录制功能，访问具体界面
- 执行用户行为，一段时间后停止录制
- 分析界面中记录的内存信息（点击
Memory-> 选择JS Heap）
监控内存的几种方式
内存问题的外在表现：
- 页面出现延迟加载或经常性暂停
- 页面持续性出现糟糕的性能
- 页面的性能随时间延长越来越差
界定内存的标准：
- 内存泄漏：内存使用持续升高
- 内存膨胀：在多数设备上都存在性能问题
- 频繁垃圾回收：通过内存变化图进行分析
1. 浏览器任务管理器
shift + Esc调出浏览器自带的任务管理器右键勾选
JavaScript使用的内存-
内存：
DOM节点所占据的内存JavaScript使用的内存：表示js的堆，()里面表示所有可达对象正在使用的内存大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>任务管理器监控内存变化</title>
</head>
<body>
<button id="btn">add</button>
<script>
const oBtn = document.getElementById('btn');
oBtn.onclick = function() {
let arrList = new Array(1000000);
}
</script>
</body>
</html>
2. Timeline记录内存
- 进入开发人员工具面板，选择
Performance（性能） - 开启录制功能，访问具体界面
- 执行用户行为，一段时间后停止录制
- 分析界面中记录的内存信息（点击
Memory-> 选择JS Heap）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时间线记录内存变化</title>
</head>
<body>
<button id="btn">add</button>
<script>
const arrList = [];
function test() {
for (let i = 0; i < 10000; i++) {
document.body.appendChild(document.createElement('p'));
arrList.push(new Array(10000).join('x'));
}
}
document.getElementById('btn').addEventListener('click',test);
</script>
</body>
</html>
3. 堆快照查找分离DOM
什么是分离
DOM
- 界面元素存活在
DOM树上- 垃圾对象时的
DOM节点- 分离状态的
DOM节点
- 进入开发人员工具面板，选择
Memory（内存） - 选择
Heap snapshot（堆快照） - 点击
Take snapshot（获取快照） - 点击生成的快照，搜索
deta
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>堆快照监控内存变化</title>
</head>
<body>
<button id="btn">add</button>
<script>
var tmpEle;
function fn() {
var ul = document.createElement('ul');
for (let i = 0; i < 10; i++) {
var li = document.createElement('li');
ul.appendChild(li);
}
tmpEle = ul;
}
document.getElementById('btn').addEventListener('click', fn);
</script>
</body>
</html>
优化方法：
function fn() {
var ul = document.createElement('ul');
for (let i = 0; i < 10; i++) {
var li = document.createElement('li');
ul.appendChild(li);
}
tmpEle = ul;
tmpEle = null;
}
