Devtools 老师傅养成[7] - Memory 内存

原创 ScarSu 自律神仙ScarSu 2022-07-04

收录于合集 #Devtools老师傅养成系列 7个

本文结构

- 系列文相关

- 内存 & 内存泄漏 & GC

- 造成内存泄漏的常见原因

- 内存监控1-Task Manager 任务管理器

- 内存监控2-Devtools Performance面板

- 内存监控3-Devtools Memory面板

- 扩展

本文共计：1620字6图

预计阅读时间：4min10s

系列文相关

系列文请点击上方Devtools老师傅养成系列专辑
本文基于 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 执行堆栈细分的良好近似分配。