JS的内存管理

前端77

于 2024-10-08 19:02:32 发布

阅读量699

点赞数 11

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/gaotlantis/article/details/142766828

版权

内存管理是每种编程语言中至关重要的一个方面，它确保在程序运行期间，高效合理地使用内存。JavaScript也不例外，尽管它是一种高级语言，具有自动内存管理功能，但了解其内存管理机制对于编写高效、优化和可扩展的应用程序至关重要。

因此，了解JavaScript如何管理内存可以帮助我们编写更优化、性能更好和可扩展性更强的应用程序。内存管理问题，如内存使用不当和内存泄漏，可能会导致应用程序性能问题、点击响应慢甚至崩溃。

在本文中，我想讨论JavaScript如何处理内存、内存分配、垃圾回收以及常见的内存陷阱和高效使用内存的策略。

1. 什么是内存管理

编程中的内存管理涉及控制程序运行时内存的分配和释放。像许多高级语言一样，JavaScript通过一个叫做垃圾回收（Garbage collection）的过程使用自动内存管理。这使开发者不必显式管理内存，但了解内存何时分配和释放是非常必要的，可以防止内存泄漏和过度消耗内存等问题。

内存生命周期

内存分配 - 为变量、对象和函数预留内存的过程。
内存使用 - 使用已分配的内存（例如，读取或写入变量，调用函数）。
内存释放 - 一旦不再需要内存，就应该将其释放（在JavaScript中，这是通过垃圾回收（Garbage collection）完成的）。

2. JavaScript中的内存分配

当变量被声明或创建对象和函数时，JavaScript会自动分配内存。

对于Primitive Values

let x = 1;    // 为数字1分配内存
let name = 'Baki';  // 为字符串'Baki'分配内存

当我们声明一个原始值时，JavaScript会为该值分配内存，并直接将值存储在变量中。原始类型数据直接存储在栈中，并且具有固定大小。

对于非Primitive Values 当我们创建一个对象、数组或函数时，它们都存储在堆中，变量包含一个引用（或指针）指向堆中的内存位置。这些类型没有固定大小，并且可以动态增长。

let person = { name: 'Baki', age: 20 };  // 为对象在堆中分配内存
let numbers = [1, 2, 3, 4];  // 为数组在堆中分配内存
function Greet() {
  console.log('Hello, World!');
}
// 函数是JavaScript的一等对象，这意味着它们被当作对象对待，并且也存储在堆中。

3. 垃圾回收

JavaScript通过一个称为垃圾回收的过程自动释放不再使用的内存。JavaScript引擎用于垃圾回收的最常见算法是：标记和清除算法。

标记和清除算法

它的工作原理如下：

标记阶段 - 垃圾回收器标记所有可到达的变量和对象（即可从root访问，如全局变量、当前函数调用栈和事件侦听器）。这些变量被认为是alive的。
清除阶段 - 然后它检查不可到达的变量和对象（即不存在对它们的引用）。这些对象被认为是垃圾，并被移除，然后内存空间得以释放。

// 示例
let user = { name: 'Jack' }; // user引用一个对象
user = null;  // user不再引用该对象，所以该对象变得不可到达，内存会被释放

在上面的示例中，当user被设置为null时，对象{ name : 'Jack' }不再被引用。垃圾回收器最终会释放不可到达对象的内存。

root引用

程序中的root引用通常是全局对象（浏览器中的window或Node.js中的global）。所有从root可到达的变量、对象和函数都被认为是“alive”的，不会被垃圾回收。

4. 内存泄漏

当不再使用的内存没有被释放时，就会发生内存泄漏。这可能导致你的应用程序随着时间的推移消耗越来越多的内存，导致性能下降甚至崩溃。内存泄漏通常是由于不可到达的对象仍然在代码的某个部分被引用，垃圾回收器无法移除它们而引起的。

以下是常见的内存泄漏问题列表。

非预期的全局变量未使用var、let和const声明变量会被当成隐式声明的全局变量，这些变量在整个页面的生命周期内存在，并且不会被垃圾回收。

function setUser() {
  name = 'Jack';  // 隐式全局变量
}
setUser();
// 'name'现在是一个全局变量，并且永远不会被垃圾回收

2闭包虽然闭包是有用的特性，但如果不加以合理使用，它们可能会导致内存泄漏。

function outer() {
  let bigObject = { name: 'Huge object' };
  return function inner() {
    console.log(bigObject);
  };
}

const closure = outer();  // 'bigObject'由于闭包而保留在内存中

// 为了释放内存，使用后将此类变量的值赋为null

在这里，inner函数创建了一个闭包，持有对bigObject的引用。即使outer()已经返回，bigObject只要闭包存在就不能被垃圾回收。

更具体的内容可以参考：垃圾回收和闭包

DOM引用有时，当JavaScript保留对已从文档中移除的DOM元素的引用时，会发生内存泄漏。这可能会阻止DOM元素被垃圾回收。


let button = document.getElementById('myButton');

button.addEventListener('click', function handleClick() {
  console.log('Button clicked');
});

// 稍后，按钮从DOM中移除

document.body.removeChild(button);  // 按钮由于事件侦听器仍然保留在内存中

// 解决方案，不再使用时移除事件侦听器

button.removeEventListener('click', handleClick)

定时器（setInterval和setTimeout）如果不正确清除，像setTimeout和setInterval这样的定时器可能会导致内存泄漏。
```
let counter = 0;
const intervalId = setInterval(() => {
  console.log(counter++);
}, 1000);

// 稍后，如果未调用clearInterval()，这将无限期地继续运行

// 解决方案，不再需要定时器时总是使用 clearTimeout()或clearInterval()
```
结论

由于垃圾回收，JavaScript的内存管理在很大程度上是自动的。但了解内存分配和释放的工作方式对于编写高效和优化的代码至关重要。作为一个优秀的工程师，你检测和防止内存泄漏、管理闭包、处理DOM引用和优化复杂应用程序中的内存使用的能力将对应用程序性能和用户体验产生重大影响。

原文：https://juejin.cn/post/7423119910882394146