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

前端内存泄漏的几种情况及方案

news 来源：原创 2025/9/9 23:18:56

前端内存泄漏是常见但容易被忽视的问题，可能导致页面卡顿、崩溃或性能下降。以下是几种典型场景及解决方案：

1. 未清理的全局变量

场景：

意外创建全局变量（未使用 var/let/const）。
主动挂载到 window 的大对象未释放。

function leak() {leakedData = new Array(1e6).fill('*'); // 意外全局变量window.cache = {}; // 主动挂载全局
}

解决方案：

使用严格模式 'use strict' 避免意外全局变量。
手动释放全局对象：window.cache = null;

2. 未清除的定时器/回调

场景：

setInterval/setTimeout 未及时清除。
回调函数引用了外部变量，导致关联对象无法释放。

const timer = setInterval(() => {// 频繁操作 DOM 或外部变量
}, 1000);// 未调用 clearInterval(timer)

解决方案：

组件卸载/离开时清理定时器：clearInterval(timer); clearTimeout(timer);
使用 requestAnimationFrame 替代高频定时器。

3. DOM 引用未释放

场景：

JS 中保留对已移除 DOM 的引用。

const elements = [];
function addElement() {const element = document.createElement('div');document.body.appendChild(element);elements.push(element); // 保存引用
}// 移除 DOM 但未清理数组引用
document.body.removeChild(element);

解决方案：

移除 DOM 后手动释放引用：elements = [];
使用 WeakMap/WeakSet 存储弱引用（自动回收）。

4. 未解绑的事件监听器

场景：

元素移除后未解绑事件监听器。
匿名函数导致无法正确解绑。

function addListener() {const element = document.getElementById('button');element.addEventListener('click', () => {console.log('Clicked!');});
}// 移除元素但未解绑监听器

解决方案：

使用具名函数并解绑：

function handleClick() { /* ... */ }
element.addEventListener('click', handleClick);
element.removeEventListener('click', handleClick);

使用 事件委托 减少监听器数量。

5. 闭包导致的内存泄漏

场景：

闭包中持有外部大对象，或闭包被全局变量引用。

function createClosure() {const largeData = new Array(1e6).fill('*');return function() {// 闭包隐式持有 largeData};
}const globalClosure = createClosure(); // 全局变量持有闭包

解决方案：

及时释放闭包引用：globalClosure = null;
避免在闭包中保留不必要的数据。

6. WebSocket 或第三方库未关闭

场景：

WebSocket 连接未关闭。
第三方库（如地图、图表）未调用销毁方法。

const socket = new WebSocket('ws://example.com');
// 未调用 socket.close();

解决方案：

在页面卸载时关闭连接或调用库的 destroy() 方法。

7. 框架特定问题（如 React/Vue）

场景：

React 组件卸载后未清理 setState 或副作用（如 useEffect）。
Vue 组件未解绑自定义事件。

解决方案（React）：

useEffect(() => {const timer = setInterval(() => {}, 1000);return () => clearInterval(timer); // 清理函数
}, []);

解决方案（Vue）：

beforeUnmount() {this.$eventBus.off('event', this.handler);
}

检测与调试工具

Chrome DevTools：
- Memory 面板：通过 Heap Snapshots 对比内存变化。
- Performance 面板：记录内存分配趋势。
WeakMap/WeakSet：利用弱引用自动释放内存。
LeakCanary（前端移植版）：自动化检测内存泄漏。

总结

核心原则：及时清理不再使用的引用（定时器、DOM、事件、闭包）。
框架规范：遵循 React/Vue 等框架的生命周期清理逻辑。
防患未然：使用严格模式、弱引用、工具检测。

通过合理设计代码结构和及时清理资源，可有效避免大多数内存泄漏问题。

前端内存泄漏的几种情况及方案

前端内存泄漏是常见但容易被忽视的问题，可能导致页面卡顿、崩溃或性能下降。以下是几种典型场景及解决方案： 1. 未清理的全局变量场景： 意外创建全局变量（未使用 var/let/const）。主动挂载到 window 的大对象未释放…...

编程日记 2025/9/9 23:18:56

14. LangChain项目实战1——基于公司制度RAG回答机器人

教学视频： 12. 基于Gradio搭建基于公司制度RAG_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV11VXRYTErZ/ 环境配置： python版本：3.10.8 服务器：Ubuntu 依赖包requirements.txt文件内容： aiofiles23.2.1 …...

编程日记 2025/9/9 23:18:55

解锁 indexOf、substring 和 JSON.stringify：从小程序图片上传看字符串魔法 ✨

🌟 解锁 indexOf、substring 和 JSON.stringify：从小程序图片上传看字符串魔法 ✨ 在 JavaScript 中，字符串操作和数据序列化是开发中不可或缺的技能。indexOf、substring 和 JSON.stringify 是三个简单却强大的工具，分别用于定位…...

编程日记 2025/9/8 12:50:28

Git快速入门

文章目录 Git简介准备工作常用的Linux命令git配置 git工作原理git项目创建和克隆git基本操作命令git忽略文件配置ssh远程连接 IDEA集成Gitgit分支（多人开发）公司中用到的（很清楚） Git 简介 Git就是版本控制的工具下面这个叫手动…...

编程日记 2025/9/9 23:17:41

老牌工具，16年依然抗打！

在电脑还没普及、操作系统为Windows XP/7的时代，多媒体文件的转换操作常常面临格式不兼容的问题。这时一款名为格式工厂的软件成为了众多用户的首选工具。格式工厂以其简洁易用的界面和强大的功能，轻松地进行各种文件格式的转换。成为很多修小伙伴的喜爱…...

编程日记 2025/9/6 20:47:29

JavaScript 进阶A（作用域、闭包、变量和函数提升、函数相关只是、数组解构、对象解构、构造函数

1.作用域作用域主要分为：局部作用域和全局作用域。局部作用域又分为：函数作用域和块作用域函数作用域：在函数中定义的变量只能在函数内部使用，外部无法访问块作用域：被大括号{}包起来的代码块，在这个…...

编程日记 2025/9/9 23:18:56

《深度剖析：特征工程—机器学习的隐秘基石》

在机器学习的宏大版图中，特征工程宛如一座隐藏在幕后却又至关重要的基石。它默默发挥着作用，将原始数据雕琢成模型能够有效学习和理解的形态，深刻影响着机器学习模型的性能与表现。特征工程：机器学习的关键前奏特征工程是运用…...

编程日记 2025/9/9 23:17:42

Python Tornado 框架面试题及参考答案

目录 Tornado 框架的核心组件是什么？解释其作用。 Tornado 与其他 Python 框架（如 Django、Flask）的主要区别是什么？为什么 Tornado 适合高并发场景？其设计哲学是什么？解释 Tornado 的 Application 类和 RequestHandler 类的关系。如何在 Tornado 中配置静态文件路…...

编程日记 2025/9/4 7:03:11

【音视频】VLC播放器

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档一、vlc是什么？ VLC Media Player（简称VLC）是一款免费、开源、跨平台的多媒体播放器，由非营利组织VideoLAN开发，最…...

编程日记 2025/9/9 6:07:10

视觉图像坐标转换

1. 透镜成像相机的镜头系统将三维场景中的光线聚焦到一个平面（即传感器）。这个过程可以用小孔成像模型来近似描述，尽管实际相机使用复杂的透镜系统来减少畸变和提高成像质量。小孔成像模型： 假设有一个理想的小孔，…...

编程日记 2025/9/4 13:13:51

import java.util.ArrayList; import java.util.Arrays; import java.util.List;public class test_02_28 {//长度最小的子数组找出总和大于等于target的长度最小的子数组//target 7, nums [2,3,1,2,4,3] [1.2.2.3.3.4]public static int test1(int[] nums, int target){//存…...

编程日记 2025/9/8 22:37:05

算法1-2 分数线划定

题目描述世博会志愿者的选拔工作正在 A 市如火如荼的进行。为了选拔最合适的人才，A 市对所有报名的选手进行了笔试，笔试分数达到面试分数线的选手方可进入面试。面试分数线根据计划录取人数的 150% 划定，即如果计划录取 m 名志愿者&#xf…...

编程日记 2025/9/7 18:48:48

设计模式之责任链模式

引言在职场中，请假流程大家都再熟悉不过：申请 1 至 2 天的假期，只需直属主管审批即可；若要请假 3 至 5 天，就需部门负责人进行复核；而超过 5 天的假期申请，则必须由总经理最终定夺。要是遇到超…...

编程日记 2025/9/9 14:27:10

AndroidStudio下载旧版本方法

首先，打开Android Studio的官网：https://developer.android.com/studio。然后，点击【Read release notes】。然后需要将语言切换成英文，否则会刷不出来。然后就可以看下各个历史版本了。直接点链接好像也行：h…...

编程日记 2025/9/7 4:40:21

Excel基础（详细篇）：总结易忽视的知识点，有用的细节操作

目录基础篇Excel主要功能必会快捷键LotusExcel的文件类型工作表基本操作表项操作选中与缩放边框线自动添加边框线格式刷设置斜线表头双/多斜线表头不变形的：双/多斜线表头插入多行、多列单元格/行列的移动冻结窗口方便查看数据打印的常见问题Excel格式数字格式日期格式文本…...

编程日记 2025/9/6 14:27:06

FPGA开发，使用Deepseek V3还是R1（7）：以“FPGA的整体设计框架”为例

以下都是Deepseek生成的答案 FPGA开发，使用Deepseek V3还是R1（1）：应用场景 FPGA开发，使用Deepseek V3还是R1（2）：V3和R1的区别 FPGA开发，使用Deepseek V3还是R1&#x…...

编程日记 2025/8/24 16:36:45

Android15 Camera HAL Android.bp中引用Android.mk编译的libB.so

背景描述 Android15 Camera HAL使用Android.bp脚本来构建系统。假设Camera HAL中引用了另外一个HAL实现的so （例如VPU HAL）， 恰巧被引用的这个VPU HAL so是用Android.mk构建的，那Camera HAL Android.bp在直接引用这个Android.mk编…...

编程日记 2025/9/7 9:45:34

服务流程设计和服务或端口重定向及其websocket等应用示例

服务流程设计和服务或端口重定向及其websocket等应用示例目录服务或端口重定向的服务设计和websocket等应用示例一、通用请求控制流程 1.1、入口 1.2、所有GET请求首先预检控制单元 1.3、http请求会分别自动307重定向 1.4、所有请求首先执行跨源控制单元 1.5、然后…...

编程日记 2025/9/8 8:19:43

(十五)趣学设计模式之命令模式！

目录一、啥是命令模式？二、为什么要用命令模式？三、策略模式的实现方式四、命令模式的优缺点五、命令模式的应用场景六、总结 🌟我的其他文章也讲解的比较有趣😁，如果喜欢博主的讲解方式，可以多多支…...

编程日记 2025/9/4 20:38:13

计算机毕设JAVA——某高校宿舍管理系统（基于SpringBoot+Vue前后端分离的项目）

文章目录概要项目演示图片系统架构技术运行环境系统功能简介概要网络上许多计算机毕设项目开发前端界面设计复杂、不美观，而且功能结构十分单一，存在很多雷同的项目：不同的项目基本上就是套用固定模板，换个颜色、改个文字&…...

编程日记 2025/9/6 18:05:25

点云配准技术的演进与前沿探索：从传统算法到深度学习融合(3)

3、基于深度学习的点云配准方法 3.1 深度学习在点云配准中的应用原理深度学习作为一种强大的机器学习技术，近年来在点云配准领域展现出了巨大的潜力和优势。其核心在于通过构建复杂的神经网络模型，能够自动从大量的点云数据中学习到高度抽象且有效的特…...

编程日记 2025/9/5 8:56:25

MyBatis TypeHandler 详解与实战：FastJson 实现字符串转 List

在 MyBatis 中，TypeHandler 是实现 Java 类型与数据库类型双向转换的核心组件。无论是处理基础数据类型还是复杂的 JSON、枚举或自定义对象，它都能通过灵活的扩展机制满足开发需求。本文将通过一个将数据库 JSON 字符串转换为 List<User> 的案例…...

编程日记 2025/9/5 0:29:34

实验环境搭建集锦（docker linux ros2+强化学习环境+linux上单片机串口调试）

为了记住一些实验环境配置开的文章，边配置边记，免得之后忘了。 Docker环境搭建 yay -S docker //下载docker docker info //查看docker配置 sudo systemctl start docker //系统配置打开docker sudo systemctl enable docker //系统配置后台开启d…...

编程日记 2025/9/5 3:08:54

第十三届蓝桥杯大赛软件赛决赛C/C++ 大学 B 组

A 【2022——暴力DP / 优雅背包】-CSDN博客 B 【钟表——类日期问题】-CSDN博客 C 【卡牌——二分】-CSDN博客 D 【最大数字——DFS】-CSDN博客 E 【出差——Dijkstra】-CSDN博客 F 【费用报销——01背包】-CSDN博客 G 【故障——条件概率】-CSDN博客 H 【机房—…...

编程日记 2025/8/24 7:23:12

商城系统单商户开源版源码

环境配置 1.软件安装宝塔安装系统软件:Nginx、MySQL5.6、PHP( PHP用7.1-7.4版本)、phpMyAdmin(Web端MySQL管理工具)。 2.配置mysql 设置mysql，在已安装的软件里面找到 mysql点击进行设置 3.修改sql-mode 选择左侧配置修改，找到里面的sql-mode&…...

编程日记 2025/9/6 7:37:16

【SpringBoot+Vue】博客项目开发二：用户登录注册模块

后端用户模块开发制定参数交互约束当前，我们使用MybatisX工具快速生成的代码中，包含了一个实体类，这个类中包含我们数据表中的所有字段。但因为有些字段，是不应该返回到前端的，比如用户密码，或者前端传…...

编程日记 2025/9/7 12:03:07

HTTP 协议的发展历程：从 HTTP/1.0 到 HTTP/2.0

HTTP 协议的发展历程：从 HTTP/1.0 到 HTTP/2.0 HTTP（HyperText Transfer Protocol，超文本传输协议）是 Web 的基础协议，用于客户端和服务器之间的通信。从 HTTP/1.0 到 HTTP/2.0，HTTP 协议经历了多次重大改…...

编程日记 2025/9/9 1:48:54

每日十个计算机专有名词 (7)

Metasploit 词源：Meta（超越，超出） exploit（漏洞利用） Metasploit 是一个安全测试框架，用来帮助安全专家（也叫渗透测试人员）发现和利用计算机系统中的漏洞。你可以把它想…...

编程日记 2025/9/4 19:15:44

SQL经典题型

查询不在表里的数据，一张学生表，一张学生的选课表，要求查出没有选课的学生？ select students.student_name from students left join course_selection on students.student_idcourse_selection.student_id where course_selecti…...

编程日记 2025/9/8 5:38:49

基于Linux系统的物联网智能终端

背景产品研发和项目研发有什么区别？一个令人发指的问题，刚开始工作时项目开发居多，认为项目开发和产品开发区别不大，待后来随着自身能力的提升，逐步感到要开发一个好产品还是比较难的，我认为项目开发的目的…...

编程日记 2025/9/9 15:09:11

文字描边实现内黄外绿效果

网页使用 <!DOCTYPE html> <html> <head> <style> .text-effect {color: #ffd700; /* 黄色文字 */-webkit-text-stroke: 2px #008000; /* 绿色描边（兼容Webkit内核） */text-stroke: 2px #008000; /* 标准语法 *…...

编程日记 2025/8/16 10:33:19

next实现原理

Next.js 是一个基于 React 的服务器端渲染（SSR） 和静态生成（SSG） 框架，它的实现原理涉及多个关键技术点，包括服务端渲染（SSR）、静态生成（SSG）、客户端渲染…...

编程日记 2025/9/2 15:27:53

什么是 jQuery

一、jQuery 基础入门 （一）什么是 jQuery jQuery 本质上是一个快速、小巧且功能丰富的 JavaScript 库。它将 JavaScript 中常用的功能代码进行了封装，为开发者提供了一套简洁、高效的 API，涵盖了 HTML 文档遍历与操作、事件处理、…...

编程日记 2025/8/29 13:11:45

014 rocketmq角色介绍

文章目录 NameServer1 服务发现机制2 为什么要使⽤NameServer3 NameServer如何保证数据的最终⼀致？4 特点 BrokerProducerConsumerTopicQueueProducer GroupConsumer GroupMessageTagOffset 同一消费者组下，队列只能由一个消费者消费广播模式&#xff1…...

编程日记 2025/9/3 13:49:58

如何防止Python网络爬虫爬取网站内容

要防止Python网络爬虫爬取网站内容，可以从以下几个方面入手： 遵守Robots.txt文件：首先，网站管理员可以通过robots.txt文件明确告知爬虫哪些页面可以抓取，哪些不可以。爬虫在抓取之前应先检查该文件，尊重网站…...

编程日记 2025/9/4 1:36:19

项目准备（flask+pyhon+MachineLearning）- 3

目录 1.商品信息 2. 商品销售预测 2.1 机器学习 2.2 预测功能 3. 模型评估 1.商品信息 app.route(/products) def products():"""商品分析页面"""data load_data()# 计算当前期间和上期间current_period data[data[成交时间] > data[成…...

编程日记 2025/9/6 7:54:13

选开源CMS建站系统时，插件越多越好吗？

在选择开源CMS建站系统时，插件数量并不是唯一的衡量标准，更不能简单地说“插件越多就越好”，还是需要综合评估来考虑选择结果，以下是有关选择开源CMS系统时对插件数量的考量。插件数量的优势插件数量可能带来的问题功能丰富性&a…...

编程日记 2025/9/4 6:52:48

OSPF BIT 类型说明

注：本文为 “OSPF BIT 类型 | LSA 类型 ” 相关文章合辑。机翻，未校。 15 OSPF BIT Types Explained 15 种 OSPF BIT 类型说明 Rashmi Bhardwaj Distribution of routing information within a single autonomous system in larger networks is per…...

编程日记 2025/9/2 1:44:37

C语言(3)—循环、数组、函数的详解

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、函数二、循环与数组 1.循环2.数组总结前言提示：以下是本篇文章正文内容，下面案例可供参考一、函数在C语言中，函数…...

编程日记 2025/9/9 14:21:13

大唐杯——阶段二01

03 5G寻呼 UE（User Equipment） UE是用户设备（User Equipment）的缩写，指的是移动通信网络中的终端设备，例如手机、平板电脑、物联网传感器等。 AMF（Access and Mobility Management Function&a…...

编程日记 2025/9/4 14:36:41

清华大学Deepseek第六版AIGC发展研究3.0（共186页，附PDF下载）

人工智能生成内容（AIGC）正以前所未有的速度改变我们的生活。 2024年底，清华大学新闻与传播学院与人工智能学院联合发布了《AIGC发展研究3.0版》，这份报告系统梳理了AIGC技术的突破性进展、应用场景及社会影响，并展望了…...

编程日记 2025/9/6 19:03:18

【漫话机器学习系列】114.逻辑 Sigmoid 函数

逻辑 Sigmoid 函数详解 1. 引言逻辑回归（Logistic Regression）是机器学习中常用的分类算法，而 Sigmoid 函数是逻辑回归的核心数学工具。Sigmoid 函数能够将任意实数映射到 (0,1) 之间，因此特别适用于概率估计。在这篇文章中&a…...

编程日记 2025/9/7 18:29:22

Cocos Creator3.8.6拖拽物体的几种方式

文章目录前言一、第一种通过UILocation二、第二种通过UIDelta实现总结前言在游戏开发中，拖拽物体是一个非常常见的交互功能，无论是用于UI元素的拖动，还是场景中物体的移动，拖拽操作都能极大地提升用户体验。Cocos Creator 3.8…...

编程日记 2025/8/28 8:04:31

01_NLP基础之文本处理的基本方法

自然语言处理入门自然语言处理（Natural Language Processing, 简称NLP）是计算机科学与语言学中关注于计算机与人类语言间转换的领域，主要目标是让机器能够理解和生成自然语言，这样人们可以通过语言与计算机进行更自然的互动。 …...

编程日记 2025/9/8 14:19:04

Minio搭建并在SpringBoot中使用完成用户头像的上传

Minio使用搭建并上传用户头像到服务器操作,学习笔记 Minio介绍 minio官网 MinIO是一个开源的分布式对象存储服务器，支持S3协议并且可以在多节点上实现数据的高可用和容错。它采用Go语言开发，拥有轻量级、高性能、易部署等特点，并且可以自由…...

编程日记 2025/9/7 0:50:12

深入解析 Kubernetes CRD：原理、特点与典型应用场景

深入解析 Kubernetes CRD：原理、特点与典型应用场景一、CRD 的本质与原理 1.1 什么是 CRD？ CRD（Custom Resource Definition）是 Kubernetes 提供的核心扩展机制，允许用户自定义 API 资源类型。通过 CRD，开发者可以将业务逻辑抽象为 Kubernetes 原生资源模型，实现与…...

编程日记 2025/9/7 19:33:26

【新手入门】SQL注入之盲注

一、引言在我们的注入语句被带入数据库查询但却什么都没有返回的情况我们该怎么办? 例如应用程序返回到一个"通用的"的页面，或者重定向一个通用页面(可能为网站首页)。这时，我们之前学习的SQL注入的办法就无法使用了。这种情况我们称之为无…...

编程日记 2025/8/16 11:31:04

功能丰富的自动化任务软件zTasker_2.1.0_绿色版_屏蔽强制更新闪退

🚀 zTasker 一键式效率倍增器使用指南 🙏 致谢首先感谢开发者提供如此高效的工具！ 软件本身功能强大，但部分机制需特别注意！ 📖 软件概述 zTasker 是一款通过自动化脚本/任务流实现效率飞跃的生产力工…...

编程日记 2025/9/8 22:02:38

YOLOv11-ultralytics-8.3.67部分代码阅读笔记-model.py

model.py ultralytics\models\yolo\model.py 目录 model.py 1.所需的库和模块 2.class YOLO(Model): 3.class YOLOWorld(Model): 1.所需的库和模块 # Ultralytics 🚀 AGPL-3.0 License - https://ultralytics.com/licensefrom pathlib import Pathfrom ult…...

编程日记 2025/9/7 11:16:24

深入浅出 Go 语言：协程(Goroutine)详解

深入浅出 Go 语言：协程(Goroutine)详解引言 Go 语言的协程（goroutine）是其并发模型的核心特性之一。协程允许你轻松地编写并发代码，而不需要复杂的线程管理和锁机制。通过协程，你可以同时执行多个任务，并…...

编程日记 2025/9/7 16:13:33

1. 未清理的全局变量

2. 未清除的定时器/回调

3. DOM 引用未释放

4. 未解绑的事件监听器

5. 闭包导致的内存泄漏

6. WebSocket 或第三方库未关闭

7. 框架特定问题（如 React/Vue）

检测与调试工具

总结

相关文章：