JavaScript内存泄露是指在应用程序中不再需要使用的内存由于某些原因没有被释放或回收，导致可用内存逐渐减少，最终可能会导致应用程序或系统性能下降，甚至崩溃。
如何检测JS内存泄露？
检测JavaScript内存泄露通常可以通过以下途径进行：
- 浏览器开发者工具： 大多数现代浏览器都提供了内置的开发者工具，可以用来监视内存使用情况。例如，Google Chrome的开发者工具中有"Performance"和"Memory"面板，允许开发者记录和分析网站的运行时性能和内存使用情况。
- 堆快照（Heap Snapshots）： 通过浏览器的开发者工具，可以捕获堆快照，它会展示内存分配的静态视图。通过比较连续的堆快照，可以观察到哪些对象被分配内存后没有被释放。
- 时间线记录（Timeline Profiling）： 这个工具可以帮助我们理解内存是如何随着时间的推移而增加的。我们可以使用浏览器工具的时间线功能记录一个时间段内的内存使用情况，寻找内存使用上升的趋势。
- 代码审查（Code Review）： 定期进行代码审查以查找常见的内存泄露模式，如未取消的事件监听器、闭包的滥用、未清除的定时器等。
内存泄露场景
内存泄露可能出现在多种不同的场景中，以下是一些常见的场景：
- 全局变量：
意外地创建全局变量会导致这些变量不被回收，例如，忘记使用
var、let或const关键字。 - 事件监听器未移除： 如果在DOM元素上添加了事件监听器，但在不需要时没有正确移除，它们会持续占用内存。
- 闭包： 不当使用闭包可能会导致父作用域中的变量无法被释放。
- DOM引用： JavaScript中的变量如果引用了已经从DOM中移除的元素，如果引用一直保持，那么这部分内存也不会被回收。
- 定时器：
设置了定时器（如
setInterval）而没有清除（clearInterval），可能会导致内部回调函数和相关变量长期占用内存。 - 第三方库： 使用的第三方库如果存在内存泄露，同样也会影响到使用它的应用程序。
举个具体的例子：在开发一个单页应用时，我注意到随着页面的使用时间增加，页面的响应速度逐渐变慢。我使用Chrome开发者工具中的Performance面板进行了记录，发现内存使用量呈现持续上升的趋势。通过分析和比较不同时间点的堆快照，我发现存在一个大量DOM元素对应的监听器没有在元素被移除时一并清理。修复这个问题后，应用的性能得到了显著的提升。