Understanding memory leaks

如果您熟悉 C 等低级语言，您一定使用过 malloc() 和 free()。相比之下，JavaScript 在创建对象时自动分配内存，并在不再使用时释放它。

好吧，因为它是自动管理的，所以我们作为开发人员总是有一个错误的印象，即我们不需要担心浏览器中的内存管理。如果一个站点使用越来越多的内存，这意味着没有人收集它并且存在内存泄漏。

Garbage collectors

如果垃圾收集器 (GC) 是完美的，那么内存泄漏就不是问题。问题是他们的算法不够聪明，无法检测内存泄漏。因此，需要人工干预。

垃圾收集器执行查找程序不再使用的内存并将其释放回操作系统以供将来重新分配的过程。该方法有效，但仍然会发生内存泄漏。该方法无法检测每个泄漏，例如泄漏的引用。

Why is there a memory leak?

下列是几种常见的内存泄漏类型。

Accidental global variables

function getWork() {this.work = “I am Memory leak”;
}
// The this here refers to window object and hence this variable will be created in the window.
getWork();

这里的 this 指的是 window 对象，因此这个变量将在 window 中创建。

由于全局变量不是由 GC 收集的，如果此字符串变得太大，可能会导致内存泄漏。意外全局变量的一个类似示例是在不使用 let 和 var 关键字的情况下声明变量。

Detached DOM nodes

分离 DOM 节点是一个关键问题。由于全局引用，分离的节点仍然存在于内存中。

var node = document.createElement(‘a’);
node.id = 'id1';
document.body.appendChild(node);
var main = {Id: document.getElementById(‘id1’)
}
function removeElement(){document.body.removeChild(document.getElementById(‘id1’));
}
removeElement();

在上面的例子中，removeChild 函数从树中移除了 DOM 节点，但是全局主对象中的引用 Id 仍然保留在内存中并且没有被垃圾收集。

闭包

闭包为内部函数维护外部函数变量的范围，即使在外部函数的范围之外。

function getScore(x) {function score(y) {return x + y;}return score;
}
var initial = getScore(2);
var final = initial(3);

这里的函数score，也就是内部函数，有一个全局引用，叫做initial。这个初始引用永远不会被垃圾收集。

Tools to identify memory leaks

意外的全局变量内存泄漏可以通过分析轻松检测到。我们举一个代码片段的例子，它会因为全局变量而导致内存泄漏。
例子：

var x = []
var bool = false;
function grow(){x.push(new Array(100000).join(‘a’));if(bool){setTimeout(grow, 1000);}
}
function start(){grow();bool = true;
}
function stop(){bool = false;
}

到 Chrome 开发者工具里，打开 Profiles 标签页：

选择 Take Heap Snapshot.

在这里，window 对象的黄色实际上描绘了从 JS 代码中直接引用的节点。我们需要修复这里的代码，以便我们可以摆脱黄色标记。

此处的选项是在函数内将数组设为局部，以便垃圾收集器可以收集它或显式删除全局变量。您可以找到更正后的代码：

var bool = false;
function grow(){var x = [];x.push(new Array(100000).join(‘a’));if(bool){setTimeout(grow, 1000);}
}
function start(){grow();bool = true;
}
function stop(){bool = false;
}

Allocation profiler

Allocation Timeline 是另一个工具，可以帮助您跟踪 JS 堆中的内存泄漏。要记录时间线，请转到您的 profile 面板，然后单击上面给出的相同代码的开始。

当我们单击如图所示的开始按钮并使用分配分析器进行配置时，我们可以看到它生成了如图所示的蓝线。

蓝条代表新的内存分配，这可能是内存泄漏。您可以通过缩放这些蓝色条中的任何一个来查看详细信息。此处的详细信息表示被推入数组且从不进行垃圾回收的长字符串。

更多Jerry的原创文章，尽在：“汪子熙”:

使用 Chrome Dev tools 分析应用的内存泄漏问题相关推荐

前端性能优化必备技能 - 利用 Chrome Dev Tools 进行页面性能分析
背景我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...
前端性能分析 Chrome Dev Tools 之 Performance
前端性能分析 Chrome Dev Tools 之 Performance 文章目录前端性能分析 Chrome Dev Tools 之 Performance 1. 属性字段 2. 常用性能数据指标 ...
前端性能优化之利用 Chrome Dev Tools 进行页面性能分析
背景我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...
Debug a Server–Side Rendered SAP Spartacus Storefront Using Chrome Dev Tools
In SAP Spartacus document there is a page for "How to Debug a Server–Side Rendered Storefront&q ...
谷歌 Chrome Dev Tools 浅析 – 成为更高效的 Developer
2019独角兽企业重金招聘Python工程师标准>>> Google Chrome在招来了FireFox,FireBug的项目组领导人John J. Barton后,Chrome D ...
使用Chrome Dev Tools, deb.js调试Javascript小技巧
本文讲介绍一些基于 Chrome Dev Tools 的实用的客户端Javascript 调试小技巧.我将重点关注那些无从下手,不知道该在哪儿添加断点的情景. 首先看下本文主题: 找出哪段代码正在修改 ...
从dreamweaver转入Chrome Dev Tools 开发html css静态页面
2021年啦,你还在用dreamweaver或者文本编辑器开发网页? You are out! 学习用Chrome Dev Tools 怎么开发,记录一下. 用webstorm打开你开发的html页面 ...
android 内存泄漏分析工具,Android内存泄漏终极解决篇（上）
一.概述在Android的开发中,经常听到"内存泄漏"这个词."内存泄漏"就是一个对象已经不需要再使用了,但是因为其它的对象持有该对象的引用,导致它的内存不能 ...
FFmpeg源码分析-直播延迟-内存泄漏
FFmpeg源码分析-直播延迟-内存泄漏|FFmpeg源码分析方法|ffmpeg播放为什么容易产生延迟|解复用.解码内存泄漏分析专注后台服务器开发,包括C/C++,Linux,Nginx,ZeroM ...

使用 Chrome Dev tools 分析应用的内存泄漏问题