【JavaScript】垃圾回收与内存泄漏

✨ 专栏介绍

在现代Web开发中,JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性,还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言,JavaScript具有广泛的应用场景,并且不断发展演进。在本专栏中,我们将深入学习JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外,我们还将介绍ES6及其后续版本中引入的新特性,如箭头函数、模块化、解构赋值等。通过学习这些内容,你将能够成为一名熟练的JavaScript开发者,并能够应用这些知识来构建出高质量和可维护的Web应用程序。让我们一起开始JavaScript之旅吧!

在这里插入图片描述

文章目录

    • ✨ 专栏介绍
    • 引言
    • 垃圾回收机制
      • 1. 引用计数(Reference Counting)
      • 2. 标记-清除(Mark and Sweep)
    • 示例
      • ***标记清除***
      • ***引用计数***
      • 内存泄漏
    • 总结
    • 😶 写在结尾
        • `前端设计模式专栏`
        • `Vue专栏`
        • `JavaScript(ES6)专栏`


引言

JavaScript的垃圾回收机制是一种自动化的内存管理机制,用于检测和回收不再使用的内存资源,以便重新分配给其他需要的部分。JavaScript中的垃圾回收器负责跟踪和管理内存的分配和释放,使开发人员无需手动管理内存。

内存泄漏指的是程序中分配的内存空间无法被释放和回收,并且随着时间推移导致可用内存逐渐减少。

垃圾回收机制

浏览器的 Javascript 具有自动垃圾回收机制(GCGarbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存。

其原理是:垃圾收集器会定期(周期性)找出那些不再继续使用的变量,然后释放其内存

但是这个过程不是实时的,因为其开销比较大并且 GC 时停止响应其他操作,所以垃圾回收器会按照固定的时间间隔周期性的执行。

不再使用的变量也就是生命周期结束的变量,当然只能是局部变量,全局变量的生命周期直至浏览器卸载页面才会结束。局部变量只在函数的执行过程中存在,而在这个过程中会为局部变量在栈或堆上分配相应的空间,以存储它们的值,然后在函数中使用这些变量,直至函数结束,而闭包中由于内部函数的原因,外部函数并不能算是结束。

JavaScript中的垃圾回收机制主要基于以下两个原则:

1. 引用计数(Reference Counting)

这是一种简单的垃圾回收算法,它通过跟踪每个对象被引用的次数来确定是否是垃圾。当一个对象被引用时,引用计数加1;当一个对象不再被引用时,引用计数减1。当引用计数为0时,表示该对象不再被使用,可以被回收。 但是,引用计数算法无法解决循环引用问题。如果两个或多个对象相互引用,并且没有其他地方对它们进行引用,则它们的引用计数永远不会为0,导致内存泄漏。

2. 标记-清除(Mark and Sweep)

它通过标记活动对象并清除未标记对象来进行垃圾回收。

  • 标记阶段:从根对象(如全局变量、活动函数调用栈等)开始,垃圾回收器遍历对象图,并标记所有可达的对象。可达对象是指那些仍然被引用的对象。

  • 清除阶段:在标记阶段后,垃圾回收器清除未被标记的对象,即那些不再被引用的垃圾对象。这些未被标记的对象将被释放,并且内存空间可以重新分配给其他需要的部分。

  • 压缩阶段(可选):在清除阶段后,可能会产生内存碎片。为了解决这个问题,垃圾回收器可
    以进行内存压缩操作,将活动对象紧凑地放置在一起,以便更好地利用内存空间。

示例

标记清除

当变量进入环境时,例如,在函数中声明一个变量,就将这个变量标记为“进入环境”。

从逻辑上讲,永远不能释放进入环境的变量所占用的内存,因为只要执行流进入相应的环境,就可能会用到它们。

而当变量离开环境时,则将其标记为“离开环境”。

function test(){var a = 10 // 被标记 ,进入环境 var b = 20 // 被标记 ,进入环境
}
test() // 执行完毕 之后 a、b 又被标离开环境,被回收。

垃圾回收器在运行的时候会给存储在内存中的所有变量都加上标记(当然,可以使用任何标记方式)。

然后,它会去掉环境中的变量以及被环境中的变量引用的变量的标记(闭包)。而在此之后再被加上标记的变量将被视为准备删除的变量,原因是环境中的变量已经无法访问到这些变量了。

最后,垃圾回收器完成内存清除工作,销毁那些带标记的值并回收它们所占用的内存空间。

IE9+、Firefox、Opera、Chrome、SafariJS 使用的都是标记清除的垃圾回收策略或类似的策略,只不过垃圾收集的时间间隔互不相同。

引用计数

当声明了一个变量并将一个引用类型值赋给该变量时,则这个值的引用次数就是 1。如果同一个值又被赋给另一个变量,则该值的引用次数加 1

相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数减 1。当这个值的引用次数变成 0 时,则说明没有办法再访问这个值了,因而就可以将其占用的内存空间回收回来。

这样,当垃圾回收器下次再运行时,它就会释放那些引用次数为 0 的值所占用的内存。

function test() {var a = {};	// a 指向对象的引用次数为 1var b = a;	// a 指向对象的引用次数加 1,为 2var c = a;	// a 指向对象的引用次数再加 1,为 3var b = {};	// a 指向对象的引用次数减 1,为 2
}

但是,如果循环引用就会造成内存泄漏的问题,例如:

function fn() {var a = {};var b = {};a.pro = b;b.pro = a;
}
fn();

以上代码 ab 的引用次数都是 2fn 执行完毕后,两个对象都已经离开环境,在标记清除方式下是没有问题的,但是在引用计数策略下,因为 ab 的引用次数不为 0,所以不会被垃圾回收器回收内存,如果 fn 函数被大量调用,就会造成内存泄露。
在这里插入图片描述

内存泄漏

1. 未清理的定时器或事件监听器

function startProcess() {setInterval(() => {// 执行一些操作}, 1000)
}
startProcess()

在上述代码中,我们创建了一个定时器,但没有清除它。每次定时器触发时,都会执行一些操作。如果我们没有在不再需要定时器时调用 clearInterval() 方法来清除它,定时器将持续运行并占用内存资源。

解决方法

function startProcess() {const intervalId = setInterval(() => {// 执行一些操作}, 1000)// 在不再需要定时器时清除它setTimeout(() => {clearInterval(intervalId)}, 5000)
}
startProcess()

在上述代码中,我们使用 setInterval() 创建了一个定时器,并在5秒后使用 clearInterval() 清除它。这样可以确保在一段时间后停止定时器并释放相关资源。

2. 闭包中的循环引用

function createClosure() {let data = "Sensitive Data"return function() {console.log(data)}
}
let closure = createClosure()

在上述代码中,我们创建了一个闭包函数,并将其赋值给变量 closure。闭包函数中引用了外部变量 data。如果我们在使用完闭包函数后不解除对它的引用,则闭包函数和其引用的外部变量 data 将无法被垃圾回收。

解决方法

closure = null // 解除对闭包函数的引用

在上述代码中,我们将变量 closure 设置为 null,解除了对闭包函数的引用。这样,在下一次垃圾回收周期中,闭包函数及其引用的外部变量将被标记为不再使用,并被释放。

3. 未释放的DOM元素事件监听器

const button = document.querySelector("#myButton")
button.addEventListener("click", () => {// 执行一些操作
})

在上述代码中,我们给一个按钮元素添加了一个点击事件监听器。如果我们忘记在不再需要该按钮时移除事件监听器,该按钮元素将继续保持对事件监听器的引用,导致内存泄漏。

解决方法

const button = document.querySelector("#myButton")
function handleClick() {// 执行一些操作
}
button.addEventListener("click", handleClick)
// 在不再需要按钮时移除事件监听器
button.removeEventListener("click", handleClick)

在上述代码中,我们使用 addEventListener() 添加了一个点击事件监听器,并在不再需要按钮时使用 removeEventListener() 移除它。这样可以确保在不再需要按钮时,相关的事件监听器被正确地移除,从而避免内存泄漏。

这些示例展示了一些常见的JavaScript内存泄漏场景。在实际开发中,我们应该注意及时清理不再使用的定时器、事件监听器、闭包和DOM元素等,以避免内存泄漏问题。

总结

垃圾回收是一种自动化的内存管理机制,通过标记-清除和压缩等步骤来回收不再使用的内存资源。然而,如果代码中存在内存泄漏问题,可能导致垃圾回收器无法正确释放内存。为了避免内存泄漏,需要注意及时释放资源、避免循环引用,并确保显式地解除绑定和移除不再需要的对象。


😶 写在结尾

前端设计模式专栏

在这里插入图片描述
设计模式是软件开发中不可或缺的一部分,它们帮助我们解决了许多常见问题,并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中,我们介绍了所有的前端设计模式,包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式,并将其应用于实际项目中,我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式,写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏

在这里插入图片描述

Vue.js是一款流行的JavaScript框架,用于构建用户界面。它采用了MVVM(Model-View-ViewModel)的架构模式,通过数据驱动和组件化的方式,使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中,我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面,并探索其强大的生态系统,如Vue Router和Vuex、Pinia。通过学习这些内容,你将能够成为一名熟练的Vue.js开发者,并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript(ES6)专栏

在这里插入图片描述

JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点,是构建现代Web应用程序的重要工具之一。在这个专栏中,我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外,我们还将介绍ES6(ECMAScript 2015)及其后续版本中引入的新特性,如箭头函数、模块化、解构赋值等。通过学习这些内容,你将能够成为一名熟练的JavaScript开发者,并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript(ES6)专栏

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【ArcGIS微课1000例】0082:地震灾害图件制作之DEM晕渲图(山体阴影效果)

以甘肃积石山县6.2级地震为例,基于震中100km范围内的DEM数据,制作数字高程模型山体阴影晕渲图。 文章目录 一、效果展示二、实验数据三、晕渲图制作一、效果展示 基于数字高程模型制作的山体阴影晕渲图如下所示: 二、实验数据 本试验所需要的数据包括: 1. 震中位置矢量数…

【JavaFX】JDK11 基于Gson、hutool、Jackson持久化存储实体类数据的解决方案 (读取、追加、去重json对象)

文章目录 开发环境效果前言一、Gson是什么?二、使用步骤1.引入依赖2.创建实体类创建 JsonFileService类创建JsonFileService的实现类 JsonFileServiceImpl三、实现效果开发环境 JDK11IDEA 2023.3Gson、hutool、JacksonJavaFX 11效果 前言 使用JDK1

Redis(Linux版本7.2.3)

1、停止Redis服务器 [roottssvr1-c1 sysconfig]# ps -ef | grep redis root 322 1 0 10月30 ? 02:58:53 ./bin/redis-server 0.0.0.0:6379 root 32664 12498 0 14:45 pts/0 00:00:00 grep --colorauto redis [roottssvr1-c1 sysconfig]# [roottssvr…

Linux 查看系统类型和版本(内核版本 | 发行版本)

Linux 查看系统类型和版本 首先普及下linux系统的版本内容1. 查看linux系统内核版本2. 查看linux系统发行版本 首先普及下linux系统的版本内容 内核版本和发行版本区别 内核版本就是指 Linux 中最基层的代码,版本号如 Linux version 3.10.0-327.22.2.el7.x86_64发行…

【用unity实现100个游戏之19】制作一个3D传送门游戏,实现类似鬼打墙,迷宫,镜子,任意门效果

最终效果 文章目录 最终效果素材第一人称人物移动开门效果显示原理渲染相机跟着我们视角移动门的摄像机跟着我们旋转近裁剪面设置传送配置代码实现传送效果结束完结素材 https://assetstore.unity.com/packages/3d/props/interior/door-free-pack-aferar-148411

骑砍战团MOD开发(30)-游戏大地图map.txt

骑砍1战团mod开发-大地图制作方法_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1rz4y1c7wH/ 一.骑砍游戏大地图 骑砍RTS视角游戏大地图 大地图静态模型(map.txt) 军团/城镇图标(module_parties.py). 骑砍大地图的战争迷雾和天气通过API进行管理和控制: # Weather-h…

雪花算法(Snowflake)介绍和Java实现

1、雪花算法介绍 (1) 雪花算法(SnowFlake)是分布式微服务下生成全局唯一ID,并且可以做到去中心化的常用算法,最早是Twitter公司在其内部的分布式环境下生成ID的方式。 雪花算法的名字可以这么理解,世界上没有两片完全相同的雪花,…

用ChatGPT挑选钻石!著名珠宝商推出-珠宝GPT

根据Salesforce最新发布的第五版《互联网购物报告》显示,ChatGPT等生成式AI的出现、快速发展,对零售行业和购物者产生了较大影响。可有效简化业务流程实现降本增效,并改善购物体验。 著名珠宝商James Allen为了积极拥抱生成式AI全面提升销售…

Linux:apache优化(1)—— 长链接/保持连接

系统:CentOS 7.9 apache版本为:2.4.25 需要使用源码包进行安装才能够使用这些扩展模块 在使用这些扩展模块前要先下载zlib-devel 安装--enable-deflate选项需要的网页压缩传输的软件包 yum -y install zlib-devel 在配置编译安装时需要使用扩展配置 ./config…

PromQL语法

PromQL(Prometheus Query Language)是 Prometheus 内置的数据查询语言,它能实现对事件序列数据的查询、聚合、逻辑运算等。它被广泛应用在 Prometheus 的日常应用当中,包括对数据查询、可视化、告警处理当中。简单地说&#xff0c…

dev express 15.2图表绘制性能问题(dotnet绘图表)

dev express 15.2 绘制曲线 前端代码 <dxc:ChartControl Grid.Row"1"><dxc:XYDiagram2D EnableAxisXNavigation"True"><dxc:LineSeries2D x:Name"series" CrosshairLabelPattern"{}{A} : {V:F2}"/></dxc:XYDi…

Windows实现MySQL5.7主从复制(详细版)

使用免安装版本&#xff08;官网下载地址&#xff09; 在Windows上安装两种MySQL服务并同时开启服务 1.下载配置 打开解压文件所在位置&#xff0c;就新建一个配置文件my.ini。 2.主库安装 主库的my.ini配置文件如下&#xff1a; [mysqld] #设置主库端口&#xff0c;注意须是…

Leetcode—1572.矩阵对角线元素的和【简单】

2023每日刷题&#xff08;七十三&#xff09; Leetcode—1572.矩阵对角线元素的和 实现代码 class Solution { public:int diagonalSum(vector<vector<int>>& mat) {int n mat.size();if(n 1) {return mat[0][0];}int sum 0;int i 0, j n - 1;while(i &…

怎么解决 Nginx反向代理加载速度慢?

Nginx反向代理加载速度慢可能由多种原因引起&#xff0c;以下是一些可能的解决方法&#xff1a; 1&#xff0c;网络延迟&#xff1a; 检查目标服务器的网络状况&#xff0c;确保其网络连接正常。如果目标服务器位于不同的地理位置&#xff0c;可能会有较大的网络延迟。考虑使用…

\r\n和缓冲区/进度条小程序

一 前置知识 带有\n就会立马刷新缓冲区(因为显示器是行刷新)&#xff0c;\r不会刷新缓冲区 刷新的2个场景: 1 ~fflush 缓冲区中存在\r或\n --> \r fflush --> 不换行的\n) 2 ~ 文件关闭自动刷新缓冲区 倒计时小程序0-9 %-d是左对齐,%d是右对齐 倒计时小程序0-99 …

解决基于VectorGrid的矢量瓦片Y轴偏移的问题

目录 前言 一、GeoServer的瓦片 1、GeoWebcache缓存配置 2、矢量瓦片本地缓存 3、瓦片访问 二、VectorGrid加载本地瓦片 1、加载关键代码 2、默认模式的问题 3、问题分析 4、tms参数修改 总结 前言 在前面的博文介绍中&#xff0c;在线连接如下&#xff1a;浅谈前端自定义…

二叉树的后序遍历,力扣

目录 建议先刷一下中序遍历 题目地址&#xff1a; 题目&#xff1a; 我们直接看题解吧&#xff1a; 解题方法&#xff1a; 注&#xff1a; 解题分析&#xff1a; 解题思路&#xff1a; 代码实现&#xff1a; 代码实现&#xff08;递归&#xff09;&#xff1a; 代码实现&#x…

electron autoUpdater自动更新使用示例 客户端+服务端

封装好的 update.js 模块 use strict; const { autoUpdater } require(electron) // 更新检测 // https://www.electronjs.org/zh/docs/latest/api/auto-updaterconst checkUpdate (serverUrl) >{const updateUrl ${serverUrl}/update?platform${process.platform}&am…

pycharm python环境安装

目录 1.Python安装 2.PyQt5介绍 3.安装pyuic 4.启动designer.exe 5.pyinstaller(打包发布程序) 6.指定源安装 7.PyQt5-tools安装失败处理 8.控件介绍 9.错误记录 1.NameError: name reload is not defined 10.开发记录 重写报文输出和文件 ​编辑 1.Python安装 点…

burpsuite模块介绍之compare

导语 Burp Comparer是Burp Suite中的一个工具&#xff0c;主要提供一个可视化的差异比对功能&#xff0c;可以用于分析比较两次数据之间的区别。它的应用场景包括但不限于&#xff1a; 枚举用户名过程中&#xff0c;对比分析登陆成功和失败时&#xff0c;服务器端反馈结果的区…