【JS】垃圾回收机制与内存泄漏

news2024/9/21 12:26:57

垃圾回收机制与内存泄漏

内存泄漏是指在程序运行过程中,某些不再需要使用的内存没有被正确释放,导致这些内存资源无法再被系统重新使用。随着程序的持续运行,内存泄漏会不断消耗可用内存,最终可能导致内存不足、系统变慢,甚至程序崩溃。

JS 是一种具有自动内存管理机制的语言,开发者不需要手动分配和释放内存。JS 引擎(例如 V8)通过垃圾回收机制来自动管理内存。这种机制的核心任务是识别和回收不再使用的对象,从而避免内存泄漏

内存泄漏通常是由于对象引用未被正确清理,导致垃圾回机制无法回收这些对象。

常见引起内存泄漏的几种方式

1. 全局变量未清理

声明全局变量时会一直存在于内存中,直到程序结束。如果不小心使用全局变量而没有清理,可能导致不必要的内存占用。

let leakData = [];
function addData(data) {
  leakData.push(data); 
}

2. 闭包(Closure)使用不当

闭包可以捕获函数中的变量,但如果这些变量不再需要时没有正确释放,可能会导致内存泄漏。

function createLeak() {
  let largeData = new Array(1000000); // 占用大量内存
  return function() {
    console.log(largeData.length); // 引用了 largeData,导致它无法被回收
  }
}
let leak = createLeak();

3. 未移除的事件监听器

注册事件监听器时,如果没有手动移除则会一直引用相关的 DOM 元素,导致这些元素无法被回收。

const button = document.getElementById('myButton');
function handleClick() {
  console.log('点击了');
}
button.addEventListener('click', handleClick);
// 当按钮被移除后,如果没有移除事件监听器,事件引用仍然存在

4. DOM 元素引用未清理

当 DOM 元素从页面中移除后,如果程序仍然保留了对该元素的引用,它的内存不会被释放。

let element = document.getElementById('myElement');
document.body.removeChild(element); 
// 但是 element 变量仍然存在,导致该 DOM 节点的内存无法被释放

5. 计时器或回调函数未清理

使用 setInterval 或 setTimeout 时,如果没有手动清理也会导致内存泄漏。

let intervalId = setInterval(() => {
  console.log('Running...');
}, 1000);
// 如果没有调用 clearInterval(intervalId),这个计时器会一直存在

如何避免内存泄漏

  • 避免不必要的全局变量,将变量限制在合适的作用域内。
  • 合理使用闭包,确保在不再需要时清理对变量的引用。
  • 及时移除事件监听器,当 DOM 元素或事件不再需要时,使用 removeEventListener 来移除事件监听器。
  • 使用 clearIntervalclearTimeout 清理不再需要的定时任务。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2152310.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

828华为云征文 | 云服务器Flexus X实例:one-api 部署,支持众多大模型

目录 一、one-api 介绍 二、部署 one-api 2.1 拉取镜像 2.2 部署 one-api 三、运行 one-api 3.1 添加规则 3.2 运行 one-api 四、添加大模型 API 4.1 添加大模型 API 五、总结 本文通过 Flexus云服务器X实例 部署 one-api。Flexus云服务器X实例是新一代面向中小企业…

SOC的几种估算方法

一、前言 一般来说,业内可以将SOC的精度做到5%左右,如果想要让SOC精度进一步提升,这时需要提高电流采样的精度或者提高电流在0点的宽度(业内一般是判断电流小于一定的值,则说明电流为0),但这种提…

【LeetCode每日一题】——401.二进制手表

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 回溯 二【题目难度】 简单 三【题目编号】 401.二进制手表 四【题目描述】 二进制手表顶部…

修改 Visual Studio 的主题颜色、背景颜色、字体

本人使用的是 VS2019 版本的。 点击上方工具栏中的【工具】-> 【选项】。 在 【环境】->【常规】中,可以更改整个界面的主题颜色。 浅色和深色的主题如下: 在【环境】->【字体和颜色】中,可以更改代码区的背景色。 不同背景示例&…

数据仓库建模方法论 :ER模型(三范式)

ER模型之三范式: 其实范式有很多,这一系列范式就是指在设计关系型数据库时,需要遵从的不同的规范。关系型数据库的范式一共有六种,分别是第一范式(1NF)、第二范式(2NF)、第三范式&am…

【开源免费】基于SpringBoot+Vue.JS教师工作量管理系统(JAVA毕业设计)

本文项目编号 T 043 ,文末自助获取源码 \color{red}{T043,文末自助获取源码} T043,文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…

基于SpringBoot+Vue的医院急诊病房管理系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的…

HK-MSR高性能无线物流监测方案,内含振动性能实机验证

前言 在航空航天、汽车、微电子和光学系统等领域,确保产品或设备在物流运输和实际应用中的安全性和可靠性至关重要。企业通常通过振动台模拟实际环境,进行振动测试以评估产品的性能和耐久性。 常用的测试方法包括正弦、随机和冲击振动测试。然而&#…

如何使用Postman搞定带有token认证的接口实战!

现在许多项目都使用jwt来实现用户登录和数据权限,校验过用户的用户名和密码后,会向用户响应一段经过加密的token,在这段token中可能储存了数据权限等,在后期的访问中,需要携带这段token,后台解析这段token才…

Codeforces Round 784 (Div. 4) Kotlin

本期封面原图 画师煮タ 大福豆 最近学了下Kotlin的基础语法 想着巩固一下就开了一把div4 最后几题没时间了还是换回了C 要不然没法AK了 Idea编译的时候最后必须加上一句main函数的调用,但是cf的测评机又不能加这一句,总是忘记注释掉所以ce了很多发&…

「C++系列」文件和流

【人工智能教程】,前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。 点击跳转到网站:【人工智能教程】 文章目录 一、文件和流1. 文件操作① 打开文件② 读写文件 2. 流操作 二、应…

【CPU】CPU的物理核、逻辑核、超线程判断及L1、L2、L3缓存和缓存行说明

CPU物理核及L1、L2、L3及缓存 CPU缓存 CPU 缓存是一种用于存储临时数据以提高计算机程序性能的内存层次结构。它通常分为三个层次:L1(一级)、L2(二级)和L3(三级)缓存。缓存大小是CPU的重…

基于yolov5和openpose人体骨骼关键点实现的摔倒姿态识别检测系统实现

【参考源码】 https://github.com/HRonaldo/Openpose_YOLO 本项目参考上面框架进行全面改进,改进如下: (1)封装YOLOv5检测类,这样可以加强阅读便利性,模块设计方便嵌入其他框架,后面我会换成…

OpenAI o1-preview和o1-mini现已在 GitHub Copilot和GitHub Models中提供

微软 GitHub 今天宣布在 GitHub Copilot和 Models 中提供两个新的 Open AI 模型:o1-preview 和 o1-mini。OpenAI 推出了新的 o1 系列 人工智能模型,旨在花更多时间思考后再做出反应。与以前的 OpenAI 模型相比,这些模型能在科学、编码和数学领…

【吊打面试官系列-MySQL面试题】列对比运算符是什么?

大家好&#xff0c;我是锋哥。今天分享关于【列对比运算符是什么&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; 列对比运算符是什么&#xff1f; 在 SELECT 语句的列比较中使用&#xff0c;<>&#xff0c;<&#xff0c;<&#xff0c;> &#x…

vue3+element-plus icons图标选择组件封装

一、最终效果 二、参数配置 1、代码示例 <t-select-icon v-model"selectVlaue" />2、配置参数&#xff08;Attributes&#xff09;继承 el-input Attributes 参数说明类型默认值v-model绑定值string-prefixIcon输入框前缀iconstringSearchisShowSearch是否显…

CleanClip For Mac 強大的剪貼簿助手Paste替代工具 v2.2.1

软件介绍&#xff1a; CleanClip是一款专为Mac设计的强大剪贴板管理工具&#xff0c;旨在提升用户的工作效率和生产力。这款应用完全采用原生Swift编写&#xff0c;为Mac用户提供了流畅、快速且直观的使用体验。CleanClip不仅支持文本内容的管理&#xff0c;还能处理图片、文件…

mac电脑打不开rar文件怎么办 rar文件怎么转换成zip并打开

rar文件是一种常见的压缩文件格式&#xff0c;它可以将多个文件或文件夹打包成一个文件&#xff0c;从而节省空间和方便传输。但是&#xff0c;mac系统并没有自带的工具可以直接打开或解压rar文件&#xff0c;那么&#xff0c;mac用户该如何处理rar文件呢&#xff1f; 一、mac电…

lettuce引起的Redis command timeout异常

项目使用Lettuce&#xff0c;在自己的环境下跑是没有问题的。在给客户做售前压测时&#xff0c;因为客户端环境比较恶劣&#xff0c;service服务和中间件服务不在同一机房。服务启动后不一会就会出现Redis command timeout异常。 经过差不多两周的追查&#xff0c;最后没办法把…

哪个牌子的麦克风好用?无线麦克风避坑指南:五大常见问题

随着短视频行业的兴起&#xff0c;和视频拍摄有关的外设也被推到了风口浪尖上&#xff0c;而麦克风作为视频拍摄或者现场直播使用的主要拾音工具&#xff0c;自然成为了大家非常关注的一个摄影外设工具&#xff0c;毕竟一款好的拾音工具能够给视频创作者或者直播博主带来更好的…