JavaScript内存管理与大应用优化技巧

内存管理对于JavaScript应用程序至关重要，特别是当它们规模扩大时。无论您是构建网页应用还是复杂的服务器端应用，优化内存使用可以使您的代码更高效，避免内存泄漏，并从而为用户提供更流畅的体验。让我们来看看JavaScript是如何管理内存的，识别常见的问题，并探讨如何更好地优化内存使用。

JavaScript 有一个自动垃圾回收机制，即它会根据需要自动分配和回收内存。了解 JavaScript 的内存管理可以避免过度使用内存资源。

关键记忆阶段如下:

1. 分配: 变量和对象在创建时会被分配内存空间。函数的分配过程在这里不需要特别强调，因为函数的行为与变量和对象有所不同。
2. 使用: JavaScript 在代码需要使用这些变量或对象时，会用到所分配的内存。
3. 释放（垃圾回收）: JavaScript 的垃圾回收器（GC）会定期回收未被引用的对象所占用的内存，使资源可以被重新利用。

然而，GC 并不能解决所有内存问题。如果你的代码不必要的引用持有，会导致内存泄漏，内存使用量会随时间不断增加，进而可能拖慢整个应用程序。

1. 全局变量：
全局变量在整个应用的生命周期里一直存在，很少被垃圾回收。这可能会导致变量范围定义不当引起意外的内存泄漏。

function myFunc() {
    globalVar = "我是内存泄漏!";
}

切换到全屏模式，退出全屏

在这里，globalVar 没有使用 let、const 或 var 进行定义，从而意外地变成了一個全局变量。

从文档中移除的DOM节点仍然可以通过JavaScript访问，尽管它们不再显示，仍然会占据内存。

    let element = document.getElementById("myElement");
    document.body.removeChild(element);  // 节点已被移除，但仍然被引用

全屏 / 退出全屏

如果不及时清除，setInterval 和 setTimeout 可能会导致长时间运行的应用发生内存泄露。

    let intervalId = setInterval(() => {
        console.log("正在无限运行...");
    }, 1000);

    // 清除定时器
    clearInterval(intervalId);

点这里进入全屏模式，点击这里退出全屏模式

4. 闭包：
如果使用不当，闭包可能会导致内存问题，因为它们会保留对外部函数中变量的引用。点击这里了解更多

/* 这是一个外层函数，它创建了一个包含100000个数据元素的数组，并返回一个内层函数，该内层函数用来打印数组的长度。*/
function outer() {
    let bigData = new Array(100000).fill("data");
    return function inner() {
        console.log(bigData.length);
    };
}

点击这里进入全屏模式 点击这里退出全屏模式

这样一来，inner 会占用内存，即便不再需要 bigData，而且可以考虑增加注释解释其含义。

1. 尽量减少全局变量的使用:
尽可能将变量限制在函数或代码块内部，从而减少不必要的内存占用。

2. 已从DOM中移除的DOM节点的清楚引用:
确保在移除DOM节点时，将引用这些节点的变量设置为 null。

    document.body.removeChild(element);
    element = null;  // 释放引用;

全屏 退出全屏

3. 管理定时器和事件监听器：
确保你清除所有不再需要的定时器和监听器，尤其是在SPA中，组件会动态地挂载和卸载。

const 定时器 = setInterval(做某事, 1000);
// 不再需要时清除定时器
clearInterval(定时器);

全屏, 退出全屏

4. 尽量避免使用大的闭包：
尽量避免闭包中包含大的数据结构或引用。或者调整代码结构，减少闭包的范围。

1. 使用弱映射：
JavaScript 的 WeakMap 和 WeakSet 可以存放不再使用的对象，从而不会阻止垃圾回收。

const 弱映射 = new WeakMap(); // 定义一个弱映射
let 元素 = document.getElementById('myElement');
弱映射.set(元素, '一些元数据');
元素 = null; // 现在可以被垃圾回收器回收

全屏/退出全屏

2. 懒加载：
只在必要时加载所需的数据或模块。这样可以避免加载不必要的资源，从而节省内存并加快加载速度。

3. 高效的数据结构:
当处理大量数据时，使用如 Map、Set 这样的高效数据结构，而不是使用普通的对象和数组。

const data = new Map();
data.set("key", { /* 一堆数据 */ });

全屏模式 退出全屏

4. 资源池化：
与其反复创建和销毁实例，不如复用它们。对象池特别适合管理那些经常被创建和销毁的对象。

const pool = [];
/**

* 创建一个池对象，如果池中有可用的对象，则返回一个，否则创建一个新的LargeObject
 */
function createPooledObject() {
    if (pool.length > 0) return pool.pop();
    else return new LargeObject();
}

点击全屏 点击退出全屏

通过开发工具监控内存使用，你可以更直观地发现代码中的内存泄漏和低效模式。

Chrome 开发工具（DevTools）内存标签页：

• 内存快照: 显示JS对象和DOM节点的内存使用情况。
• 分配时间线: 跟踪内存分配随时间的变化。
• 分配剖析器: 监控内存分配以发现内存泄漏或潜在的内存问题。

在 Chrome 开发者工具中取一个堆转储：

1. 打开开发者工具（F12 或 Ctrl+Shift+I）。
2. 点击 内存 选项卡。
3. 选择 截取快照。

JavaScript的垃圾回收并不是瞬间完成的，理解其底层算法可以帮助你做出更好的代码决策。这里简单介绍一下JavaScript的垃圾回收机制是如何工作的：

标记-清除：
垃圾收集器会标记活跃（可达）的对象，然后清除不再需要的对象。

增量收集（增量式回收）:
JavaScript 不是一次性清理整个内存，而是逐步回收较小的内存块，以避免阻塞主线程。

按寿命收集：
这种技术根据对象的寿命进行分类。寿命短的对象会被更频繁地收集起来，相比之下，寿命长的对象则更可能长期驻留在内存中。

让我们来看一个优化高内存使用的 JavaScript 应用程序的例子，例如一个用于处理海量数据集的数据可视化工具。

    // 不高效的版本
    function processData(data) {
        let result = [];
        for (let item of data) {
            result.push(expensiveOperation(item));
        }
        return result;
    }

切换到全屏 切换出全屏

上述函数每次被调用时都会创建一个新的数组。通过重复使用数组或利用 WeakMap，可以优化内存的使用。

    // 优化版
    const cache = new WeakMap();
    function processData(data) {
        if (!cache.has(data)) {
            cache.set(data, data.map((data) => {
                // 耗时操作
                return expensiveOperation(data);
            }));
        }
        return cache.get(data);
    }

点击“进入全屏”来开启全屏模式，点击“退出全屏”来关闭全屏模式。

使用 WeakMap，这样我们避免不必要的保留 data，从而在不再需要时释放它，减少内存占用。

JavaScript 的内存管理对于高性能应用来说非常重要，尤其是在这些应用变得越来越复杂时。通过理解内存分配、避免常见的内存泄漏以及利用高级内存管理策略，你可以创建能够高效扩展且保持响应性的应用。掌握这些技术能让开发者构建真正强大、优化且用户友好的应用。

我的个人主页：https://shafayet.zya.me

给你个梗图😉😉😉

如图所示