本文结构
- 系列文相关
- 内存 & 内存泄漏 & GC
- 造成内存泄漏的常见原因
- 内存监控1-Task Manager 任务管理器
- 内存监控2-Devtools Performance面板
- 内存监控3-Devtools Memory面板
- 扩展
本文共计：1620字6图
预计阅读时间：4min10s
系列文相关
- 本文基于 chrome 浏览器版本 73.0.3683.103（正式版本）总结
- 本文目的：关于【devtools 能做什么】建立完善的知识结构，至于怎么做，请查阅官方文档；工具类知识需要实践，建议阅读本文时打开 sample[1]和 devtools 操作一遍
- 参考 1：google developers 官方文档[2]
- 参考 2：来自作者 Jon Kuoerman 在 FrontEndMaster 的 Mastering Chrome Developer Tools v2 课程[3]
- 参考 3：来自 作者 Tomek Sułkowski 在 medium 的系列文章[4]
- Devtools脑图.png[5]
内存 & 内存泄露 & GC
内存占用：
- allocate 分配内存(eg 声明变量
- 使用内存
- release 释放内存
内存泄漏：
内存泄露-Memory Leak：内存被占用后无法被 release，且无法被垃圾回收器回收- 内存泄漏会引起性能问题，且时间越久越严重，因为被占用且无法回收的内存只会增加不会减少
GC 垃圾回收 Garbage Collect：
- 浏览器收回内存。浏览器决定何时进行垃圾回收。回收期间，所有脚本执行都将暂停。因此，如果浏览器经常进行垃圾回收，脚本执行就会被频繁暂停
造成内存泄露常见原因
fogotten timer被遗忘的计时器：例如调用 setInterval()方法一定要加结束条件Dettached HTMLElement分离的 dom 节点：在 dom 被移除后，dom 变量仍然存在
内存监控 1-Task manager 任务管理器
- chorme 浏览器 -> task manager 任务管理器工具中，可以监控每个 tab 页的 js 内存占用大小
Memory列表示原生内存。DOM 节点存储在原生内存中。如果此值正在增大，则说明正在创建 DOM 节点。JavaScript Memory列表示 JS 堆。此列包含两个值。实际大小表示页面上的对象正在使用的内存量。如果此数字在增大，要么是正在创建新对象，要么是现有对象正在增长。
内存监控 2-Devtools Performance 面板
- 在
Performance面板记录性能时，勾选memory即可在分析结果中看到 memory 占用情况
//示例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);
//示例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 面板
- 如上图所示，在右侧三种内存分析模式选择一种后，即可点击左上角
record开始记录内存
Heap snapshot堆快照，记录当前时间点内存中页面 js 对象和 dom 节点的分配情况Allocation instrumentation on timeline按时间轴记录内存，可以选记录内存分配调用栈(可以帮助定位到具体分配内存的源码)Allocation sampling使用抽样方法记录内存分配。具有最小的性能开销，可用于长时间运行的操作。提供了由 JavaScript 执行堆栈细分的良好近似分配。
- 左上角的垃圾桶图标
Collect garbage是强制执行一次垃圾回收，内存监控的最佳实践是在监控内存前执行一次强制垃圾回收 - 利用上述示例 2 代码，执行时间线 Memory 分析：
扩展
- 内存相关术语[6]
- 深入内存分析[7]
参考资料
[1]
sample: https://masteringdevtools.com/
[2]
google developers 官方文档: https://developers.google.com/web/tools/chrome-devtools/
[3]
Mastering Chrome Developer Tools v2 课程: https://frontendmasters.com/courses/chrome-dev-tools-v2
[4]
系列文章: https://medium.com/@tomsu
[5]
Devtools脑图.png: https://i.loli.net/2019/04/19/5cb95639a9f73.png
[6]
内存相关术语: https://developers.google.com/web/tools/chrome-devtools/memory-problems/memory-101
[7]
深入内存分析: https://developers.google.com/web/tools/chrome-devtools/memory-problems/heap-snapshots
- END -
