当前位置：首页 > news >正文

前端开发时的内存泄漏问题

news 来源：原创 2025/5/9 4:29:38

- 🔍 什么是内存泄漏（Memory Leak）？
- 🚨 常见的内存泄漏场景
- - 1️⃣ 未清除的定时器（setInterval / setTimeout）
  - 2️⃣ 全局变量（变量未正确释放）
  - 3️⃣ 事件监听未清除
  - 4️⃣ 闭包导致的内存泄漏
  - 5️⃣ DOM 引用未释放
- 🛠 如何检测和防止内存泄漏？
- - 1️⃣ 使用 Chrome DevTools 监测内存
  - 2️⃣ 使用 `WeakMap` 和 `WeakSet`
  - 3️⃣ 确保在 `useEffect` 里清理副作用（React）
- ✅ 总结

🔍 什么是内存泄漏（Memory Leak）？

内存泄漏 指的是 程序运行时，已经不再使用的内存无法被释放，导致内存占用不断增加，最终可能会导致应用性能下降甚至崩溃。

在 JavaScript 中，垃圾回收机制（GC, Garbage Collection） 会自动释放不再使用的变量，但某些情况下，对象仍然被错误地引用，导致 GC 无法回收，从而造成内存泄漏。

🚨 常见的内存泄漏场景

1️⃣ 未清除的定时器（setInterval / setTimeout）

当使用 setInterval 或 setTimeout 时，如果不手动清除，函数的引用会一直保留，导致内存泄漏。

function startTimer() {setInterval(() => {console.log("Running...");}, 1000);
}
// 调用后，即使不再需要，定时器仍然占用内存
startTimer();

✅ 解决方法：在组件销毁或不需要时清除定时器

const timer = setInterval(() => {console.log("Running...");
}, 1000);clearInterval(timer); // 及时清除定时器

2️⃣ 全局变量（变量未正确释放）

如果一个变量被赋值到 window 或全局作用域，它将一直存在，导致内存无法被回收。

window.leak = []; // 这个数组永远不会被回收

✅ 解决方法：避免在 window 作用域创建变量

(function() {let tempArray = [];
})();

3️⃣ 事件监听未清除

当事件监听器（如 addEventListener）绑定到 DOM 元素上，但该元素被移除时，监听器仍然存在，导致 JavaScript 引用无法被释放。

document.getElementById("btn").addEventListener("click", function() {console.log("Clicked!");
});

✅ 解决方法：组件卸载时移除监听

const btn = document.getElementById("btn");
const handleClick = () => console.log("Clicked!");
btn.addEventListener("click", handleClick);// 在适当时机移除监听器
btn.removeEventListener("click", handleClick);

4️⃣ 闭包导致的内存泄漏

闭包使得内部函数可以访问外部函数的变量，但如果变量一直被引用，GC 无法释放它。

function createClosure() {let data = new Array(1000000); // 大量数据return function () {console.log(data.length);};
}const closure = createClosure();
// `data` 变量不会被释放

✅ 解决方法：在不需要时手动清空变量

let closure = createClosure();
closure = null; // 解除引用，让 GC 回收

5️⃣ DOM 引用未释放

如果 JavaScript 变量仍然引用一个已删除的 DOM 元素，该元素不会被回收。

let div = document.getElementById("myDiv");
document.body.removeChild(div); // 移除 DOM
// 但 div 变量仍然持有该元素的引用，导致泄漏

✅ 解决方法：手动释放引用

div = null; // 解除 JavaScript 引用，让 GC 处理

🛠 如何检测和防止内存泄漏？

1️⃣ 使用 Chrome DevTools 监测内存

打开 Performance 面板 → 录制 → 检查内存占用
在 Memory 面板 中使用 Heap Snapshot，查看哪些对象未被释放。

2️⃣ 使用 `WeakMap` 和 `WeakSet`

WeakMap 和 WeakSet 不会阻止垃圾回收，适用于临时数据存储。

let weakMap = new WeakMap();
let obj = { key: "value" };
weakMap.set(obj, "some data");
obj = null; // `obj` 被回收，WeakMap 也自动释放它的引用

3️⃣ 确保在 `useEffect` 里清理副作用（React）

如果在 React 组件中添加 事件监听、定时器 等，一定要在 useEffect 里清理：

useEffect(() => {const interval = setInterval(() => {console.log("Running...");}, 1000);return () => clearInterval(interval); // 组件卸载时清除定时器
}, []);

✅ 总结

内存泄漏 = 无用的对象无法被 GC 释放，导致内存占用持续增长。
常见原因：未清理 定时器、事件监听、闭包、DOM 引用、全局变量。
如何避免？
- 清除定时器和事件监听 (clearInterval, removeEventListener)
- 避免不必要的全局变量
- 正确管理闭包（在不需要时清空变量）
- 使用 Chrome DevTools 检查内存泄漏
- 在 React 组件中使用 useEffect 清理副作用

前端开发时的内存泄漏问题

目录 🔍 什么是内存泄漏（Memory Leak）？🚨 常见的内存泄漏场景1️⃣ 未清除的定时器（setInterval / setTimeout）2️⃣ 全局变量（变量未正确释放）3️⃣ 事件监听未清除4️⃣…...

编程日记 2025/5/9 4:29:38

「青牛科技」GC4931P/4938/4939 12-24V三相有感电机驱动芯片对标Allegro A4931/瑞盟MS4931

芯片描述： • 芯片工作电压 4.7-36V （ GC4931P ） • 芯片工作电压 7.5-36V （ GC4938/4939 ） • 外置 mos 驱动， NN 结构，内置升压预驱 • QFN5X5-28 封装，带 ePAD 散热&#…...

编程日记 2025/5/3 1:26:47

2025 年山东危化品经营单位考试攻略分享

山东的考试在全省统一标准。理论考试深入考查危化品相关标准规范，如《危险化学品重大危险源辨识》等。对于危化品储存设施的设计与维护知识要求较高。实际操作考核注重在山东化工园区常见的作业场景，如大型储罐区的操作。报名准备材料与其他省份类似…...

编程日记 2025/5/6 20:24:31

RustDesk 开源远程桌面软件 (支持多端) + 中继服务器伺服器搭建 ( docker版本 ) 安装教程

在需要控制和被控制的电脑上安装软件 github开源仓库地址 https://github.com/rustdesk/rustdesk/releases 蓝奏云盘备份 ( exe ) https://geek7.lanzouw.com/iPf592sadqrc 密码:4esi 中继服务器设置使用docker安装 sudo docker image pull rustdesk/rustdesk-server sudo…...

编程日记 2025/5/6 20:00:38

CMake 中的置变量

在 CMake 中，变量是存储和传递信息的重要方式。以下是一些常用的 CMake 变量，以表格形式列出，包括它们的名称、含义和常见用途： 变量名称含义常见用途CMAKE_CURRENT_SOURCE_DIR当前处理的 CMakeLists.txt 文件所在的源代码目录的…...

编程日记 2025/5/8 17:21:01

前后端数据序列化：从数组到字符串的旅程（附优化指南）

🌐 前后端数据序列化：从数组到字符串的旅程（附优化指南） 📜 背景：为何需要序列化？ 在前后端分离架构中，复杂数据类型（如数组、对象）的传输常需序列化为字符…...

编程日记 2025/5/7 20:55:37

为什么你涨不了粉？赚不到技术圈的钱？

“你的代码如果能打造市值百亿的产品，为什么不能为你的未来加冕？” 这不仅是一句口号，而是一段激励人心的故事的起点。想象一下，一个普通的程序员，在无数个深夜独自敲击代码中，他的每一行代码都承载着对未…...

编程日记 2025/5/8 14:57:37

MATLAB之数据分析图系列三

三维堆叠柱状图 Bar3StackPlot.m文件 clc; clear; close all; %三维堆叠柱状图 %% 数据准备 % 读取数据 load data.mat % 初始化 dataset X; s 0.4; % 柱子宽度 n size(dataset,3); % 堆叠组数%% 图片尺寸设置（单位：厘米） figureUnits c…...

编程日记 2025/5/7 20:23:29

【nvidia】Windows 双 A6000 显卡双显示器驱动更新问题修复

问题描述：windows自动更新nvidia驱动会导致只检测得到一个A6000显卡。解决方法下载 A6000 驱动 572.83-quadro-rtx-desktop-notebook-win10-win11-64bit-international-dch-whql.exehttps://download.csdn.net/download/qq_18846849/90554276 不要直接安装。如…...

编程日记 2025/5/8 23:42:36

使用Docker快速部署Dify

使用Docker快速部署Dify：一站式AI应用开发平台 Dify 是一款开源的AI应用开发平台，支持快速构建基于大模型的AI应用。通过Docker部署Dify，可以简化环境配置流程，实现高效部署和扩展。本教程将详细介绍如何通过Docker快速部署Dify。前置条件服务器/本地环境：Linux/Wind…...

编程日记 2025/5/9 4:28:43

Uniapp 实现微信小程序滑动面板功能详解

文章目录前言一、功能概述二、实现思路三、代码实现总结前言 Uniapp 实现微信小程序滑动面板功能详解一、功能概述滑动面板是移动端常见的交互组件，通常用于在页面底部展开内容面板。本文将介绍如何使用 Uniapp 开发一个支持手势滑动的底部面板组件&#xff0…...

编程日记 2025/5/9 4:36:11

PyQt5和OpenCV车牌识别系统

有需要请加文章底部Q哦可远程调试 PyQt5和OpenCV车牌识别系统一介绍此车牌识别系统基于PyQt5和OpenCV开发，蓝牌，新能源(绿牌)，黄牌，白牌均可以准确识别，支持中文识别，可以导出识别结果(Excel格式)。此…...

编程日记 2025/5/7 7:48:55

Redis如何在windows中简单安装？

Redis 在官网上有详细的介绍如何安装，但是看着也乱和麻烦。所以教大家直接用大佬整理好的。 Redis安装 ✨进入安装包地址✨安装Redis✨测试下 ✨进入安装包地址安装包地址： https://github.com/tporadowski/redis/releases Redis安装包是在github上&am…...

编程日记 2025/5/4 8:40:51

在centos7上安装ragflow

在centos7上安装ragflow 前置条件，安装centos7，换yum源，安装docker，安装git 参考文章：利用vmware快速安装一个可以使用的centos7系统-CSDN博客 ragflow的部署参考文章： https://mp.weixin.qq.com/s/Hor…...

编程日记 2025/5/6 15:15:57

LabVIEW多线程

在 LabVIEW 中，多线程编程是提升程序执行效率的关键手段，尤其是在需要并行处理数据采集、控制执行和用户界面交互的场景下。LabVIEW 本身是基于数据流（Dataflow）的编程语言，天然支持多线程，但要高效利用多线…...

编程日记 2025/4/30 4:59:48

MySQL 错误报错：Table ‘performance_schema.session_variables’ Doesn’t Exist

mysqldump -uroot -p ca>ca.sql Enter password: mysqldump: Couldnt execute SHOW VARIABLES LIKE gtid\_mode: Table performance_schema.session_variables doesnt exist 解决： USE performance_schema; CREATE TABLE session_variables (VARIABLE_NAME VAR…...

编程日记 2025/5/9 4:50:09

4月2号.

正则表达式的作用: 作用一: 示例: [1-9]表示0不在开头,\\d表示数字,{5,19}表示位数. 拓展: 正则表达式: System.out.println("a".matches(regex:"[a-z&[def]]")); //trueSystem.out.println("&".matches(regex:"[a-z&[def]]&…...

编程日记 2025/5/9 4:05:25

分析sys高问题的方法总结

一、背景 sys高的问题往往属于底层同学更需要关注的问题，sys高的问题往往表现为几种情况，一种是瞬间的彪高，一种是持续的彪高。这篇博客里，我们总结一下常用的分析方法和分析工具的使用来排查这类sys高的问题。二、通过mpstat配…...

编程日记 2025/5/8 23:42:47

使用Leaflet对的SpringBoot天地图路径规划可视化实践-以黄花机场到橘子洲景区为例

目录前言一、路径规划需求 1、需求背景 2、技术选型 3、功能简述二、Leaflet前端可视化 1、内容布局 2、路线展示 3、转折路线展示三、总结前言在当今数字化与智能化快速发展的时代，路径规划技术已经成为现代交通管理、旅游服务以及城市规划等领域的…...

编程日记 2025/5/9 4:07:05

操作系统(中断异常陷阱) ─── linux第28课

目录 1.硬件中断 2. 时钟中断 3. OS本质 4. 软件中断缺页中断？内存碎片处理？除零野指针错误？ 操作系统本质总结操作系统是对软件硬件资源管理的软件 1.硬件中断中断向量表(IDT)就是操作系统的⼀部分，启动就加载到内存中了…...

编程日记 2025/5/9 4:43:14

数据接口以及ORM查询

一，Model数据关系： （1）种类： 一对一关系（例如身份证和钥匙，账号密码等，各自一一对应。），一对多关系 （例如一个作者可以有很多作品，…...

编程日记 2025/5/6 15:51:58

clickhouse集群版本部署文档

集群版本介绍 clickhouse是表级别的集群，一个clickhouse实例可以有分布式表，也可以有本地表。本文介绍4个节点的clickhouse情况下部署配置。分布式表数据分成2个分片，2个副本，总共4份数据： 节点1数据：分…...

编程日记 2025/5/7 11:59:43

《全栈+双客户端Turnkey方案》架构设计图

今天分享一些全栈双客户端Turnkey方案的架构与结构图。 1：三种分布式部署方案:网关方案，超级服务器单服方案，直连逻辑服方案 2: 单服多线程核心架构: 系统服务逻辑服服务 3: 系统服务的多线程池调度设计 4:LogicServer Update与ECS架构&…...

编程日记 2025/4/29 6:56:04

2025年2月一区SCI-壮丽细尾鹩莺算法Superb Fairy-wren Optimization-附Matlab免费代码

引言本期介绍一种新的元启发式算法——壮丽细尾鹩莺优化算法Superb Fairy-wren Optimization algorithm，SFOA。该算法结合了壮丽细尾鹩莺群体中幼鸟的发育，繁殖后喂养幼鸟的行为，以及它们躲避捕食者的策略，于2025年2月最新发表在…...

编程日记 2025/5/9 4:21:14

Mac下小智AI本地环境部署

可以进行聊天、编写程序、播放歌曲等等的小智语音聊天小助手，在Mac环境下修改源代码，值得拥有。本篇内容主要讲解Mac下环境的搭建，WebSocket的修改。注：环境python3.12.0、ESP-IDF5.4.0、开发板ESP32S3。目录 1.Git安装2.Python…...

编程日记 2025/5/4 12:08:32

小程序30-wxml语法-声明和绑定数据

小程序页面中使用的数据均需要在Page() 方法的 data对象中进行声明定义在将数据声明好以后，在 WXML 使用 Mustache 语法 ( 双大括号{{ }} ) 将变量包起来，从而将数据绑定在 {{ }} 内部可以做一些简单的运算，支持如下几种方式: 算数运算三…...

编程日记 2025/5/9 4:44:25

Go 语言语法精讲：从 Java 开发者的视角全面掌握

《Go 语言语法精讲：从 Java 开发者的视角全面掌握》一、引言1.1 为什么选择 Go？1.2 适合 Java 开发者的原因1.3 本文目标二、Go 语言环境搭建2.1 安装 Go2.2 推荐 IDE2.3 第一个 Go 程序三、Go 语言基础语法3.1 变量与常量3.1.1 声明变量3.1.2 常量定…...

编程日记 2025/5/9 4:25:52

【Python】Python 环境 + Pycharm 编译器官网免费下载安装（图文教程，新手安装，Windows 10 系统）

目录 Python 环境的下载安装第一步进入官网第二步找到匹配 windows 系统的 python 下载页面第三步根据电脑 cpu 架构选择 python 版本第四步安装 python 环境第五步验证 python 环境变量 Pycharm 的下载安装第一步进入官网第二步安装 Pycharm Community Edition第三步第…...

编程日记 2025/5/5 23:58:26

mapbox_gl The requested URL returned error: 401

pod install 安装报错问题 [!] Error installing Mapbox-iOS-SDK [!] /usr/bin/curl -f -L -o /var/folders/63/x3r49j_x1vld56p1sxdvnlj00000gn/T/d20250402-17703-52p5j/file.zip https://api.mapbox.com/downloads/v2/mobile-maps/releases/ios/packages/6.4.1/mapbox-ios-…...

编程日记 2025/5/9 4:34:11

目录