什么是内存泄漏?JavaScript 垃圾回收机制原理及方式有哪些?哪些操作会造成内存泄漏?

1、什么是内存泄漏? 

内存泄漏是前端开发中的一个常见问题,可能导致项目变得缓慢、不稳定甚至崩溃。内存泄漏是指不再用到的内存没有及时被释放,从而造成内存上的浪费。

2、 JavaScript 垃圾回收机制

1) 原理:

JavaScript 垃圾回收机制很简单:找出不再使用的变量,然后释放掉其占用的内存。

2)最常用的垃圾收集方式:

① 标记-清除 

对内存中所有变量加上标记,然后再去掉进入环境的变量的标记,最后就是清除那些带标记的变量并回收它们所占用的内存空间。
 

当变量进入环境时,就将这个变量标记为“进入环境”。

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

② 引用计数

语言引擎有一张”引用表”,跟踪记录每个值被引用的次数

如果一个值的引用次数是0,就表示这个值不再用到了,因此可以将这块内存释放。

3、哪些操作会造成内存泄漏?

出现内存泄漏的情况:

① 未正确清理事件处理器 

会持有对DOM的引用,妨碍垃圾回收器释放相关的内存。
例如使用了addEventListener,那就要记得 removeEventListener

② 循环引用

当两个或多个对象相互引用时,即使你不再使用它们,它们也无法被垃圾回收。
解决方法:确保在不再需要对象时,将其引用设置为null,打破循环引用。

③ 未正确清理定时器和间隔器

原因:定时器 setInterval 或者 setTimeout 在不需要使用的时候,没有被clear,导致定时器的回调函数及其内部依赖的变量都不能被回收,这就会造成内存泄漏。


解决方法:在不再需要定时器或间隔器时,使用 clearTimeout 和 clearInterval 来清理它们

4、内存泄露排查方法: 

利用谷歌浏览器调试工具 Memory 的内存快照 Heap snapshot,找到使你内存增加的业务场景。

5、在 Vue 中有哪些注意的地方: 

虽然浏览器可以进行垃圾自动回收,但是当代码比较复杂时,垃圾回收所带来的代价较大,所以应该尽量减少垃圾回收。

① 对数组进行优化:

在清空一个数组时,最简单的方法就是给其赋值为[ ],但是与此同时会创建一个新的空对象,可以将数组的长度设置为0,以此来达到清空数组的目的。

② 对 Object 进行优化

对象尽量复用,对于不再使用的对象,就将其设置为null,尽快被回收

③ 对函数进行优化

在循环中的函数表达式,如果可以复用,尽量放在函数的外面。 

其它: 

Vue组件触发 beforeDestroy 声明钩子函数的时候,把变量置null(那些用来渲染页面的数据量大的Object、Array等;也可以全部置 null ;包括dom绑定的事件要移除、定时器要清除)

组件中使用 v-show 可能会导致 DOM 元素积累,而销毁 DOM 的核心其实还是使用v-if,尽量使用 v-if 代替v-show,同时避免不必要的DOM操作。

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

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

相关文章

《从菜鸟到大师之路 正则表达式 篇》

《从菜鸟到大师之路 正则表达式 篇》 正则表达式是一个强大的文本匹配工具。但是,对于前端初学者来说,众多的符号和规则可能让人难以理解。其实,你不需要记住所有的正则表达式语法!本文将分享一些简单而实用的技巧,帮…

【C++ 学习 ㉘】- 详解 C++11 的列表初始化

目录 一、C11 简介 二、列表初始化 2.1 - 统一初始化 2.2 - 列表初始化的使用细节 2.2.1 - 聚合类型的定义 2.2.2 - 注意事项 2.3 - initializer_list 2.3.1 - 基本使用 2.3.2 - 源码剖析 一、C11 简介 1998 年,C 标准委员会发布了第一版 C 标准&#xff0…

vm虚拟机克隆ubuntu

1. 使用vm虚拟机自带的克隆功能 2. 选择完整克隆,然后选择您克隆到哪里的目录 3. 点击编辑你克隆后的虚拟机,点网络适配器,然后点高级,点击生成mac地址(由于唯一,所以需要重新生成) 4. 开启虚拟…

asw ec2 ssh 登录设置

使用 ssh 登录 aws ec2 主机,需要创建 密钥对,设置好安全组规则。 密钥对 ec2 -> 网络与安全 -> 密钥对 -> 创建密钥对 名称: [输入一个名称] 创建密钥对 浏览器会下载一个后缀为 .pem 的文件,使用 ssh 时将会用到。 安全组设置…

vue 动态数字效果 vue-animate-number

安装 vue-animate-number 插件 npm install vue-animate-number (注:是npm、cnpm还是yarn根据具体项目要求) 在 main.js 中引入 import Vue from vue import VueAnimateNumber from vue-animate-number Vue.use(VueAnimateNumber)动态使用…

【MySQL】分析SQL的几种方式

文章目录 一、查看SQL执行频率二、定位低效率执行SQL1. show processlist2. 慢查询日志 三、explain分析执行计划1. id2. select_type3. type4. key5. extra 四、show profile 一、查看SQL执行频率 show session status:显示 session 级的统计结果(不写…

openGauss学习笔记-100 openGauss 数据库管理-管理数据库安全-客户端接入之用SSL进行安全的TCP/IP连接

文章目录 openGauss学习笔记-100 openGauss 数据库管理-管理数据库安全-客户端接入之用SSL进行安全的TCP/IP连接100.1 背景信息100.2 前提条件100.3 注意事项100.4 操作步骤100.5 相关参考 openGauss学习笔记-100 openGauss 数据库管理-管理数据库安全-客户端接入之用SSL进行安…

excel+requests管理测试用例接口自动化框架

背景: 某项目有多个接口,之前使用的unittest框架来管理测试用例,将每个接口的用例封装成一个py文件,接口有数据或者字段变动后,需要去每个py文件中找出变动的接口测试用例,维护起来不方便,为了…

双目视觉实战--单视图测量方法

目录 一.简介 二、2D变换 1. 等距变换(欧式变换) 2. 相似变换 3. 仿射变换 4. 射影变换(透视变换) 5. 结论 三、影消点与影消线 1. 平面上的线 2. 直线的交点 3. 2D无穷远点 4. 无穷远直线 5. 无穷远点的透视变换与仿…

Spring Cloud Gateway 使用 Redis 限流使用教程

从本文开始,笔者将总结 spring cloud 相关内容的教程 版本选择 为了适应 java8,笔者选择了下面的版本,后续会出 java17的以SpringBoot3.0.X为主的教程 SpringBoot 版本 2.6.5 SpringCloud 版本 2021.0.1 SpringCloudAlibaba 版本 2021.0.1.…

Prometheus的Pushgateway快速部署及使用

prometheus-pushgateway安装 一. Pushgateway简介 Pushgateway为Prometheus整体监控方案的功能组件之一,并做于一个独立的工具存在。它主要用于Prometheus无法直接拿到监控指标的场景,如监控源位于防火墙之后,Prometheus无法穿透防火墙&…

C++基础——内存分区模型

1 概述 C程序在执行是,将内存大致分为4个区域: 代码区:用于存放二进制代码,由操作系统进行管理全局区:存放全局变量和静态变量及常量栈区:由编译器自动分配释放,存放函数的参数、局部变量等堆…

回首往昔,初学编程那会写过的两段愚蠢代码

一、关于判断两个整数是否能整除的GW BASIC创意代码 记得上大学时第一个编程语言是BASIC,当时Visual Basic还没出世,QBASIC虽然已经在1991年随MS-DOS5.0推出了,但我们使用的还是 GW-BASIC, 使用的教材是谭浩强、田淑清编著的《BA…

【广州华锐互动】VR建筑安全培训体验为建筑行业人才培养提供有力支持

随着建筑行业的快速发展,建筑施工安全问题日益受到广泛关注。然而,传统的安全培训方式往往缺乏实践性和真实性,难以让员工真正掌握安全操作技能。近年来,虚拟现实(VR)技术的广泛应用为建筑施工安全培训提供了新的机遇。 虚拟现实技…

armbian 安装mysql

1、执行安装指令 sudo apt-get update sudo apt-get install mysql-server 2、安装成功后,设置密码 ALTER USER root% IDENTIFIED WITH mysql_native_password BY ysw1234; flush privileges;3、设置允许远程连接并生效 use mysql; update user set host % whe…

金融用户实践|分布式存储支持数据仓库业务系统性能验证

作者:深耕行业的 SmartX 金融团队 闫海涛 估值是指对资产或负债的价值进行评估的过程,这对于投资决策具有重要意义。每个金融公司资管业务人员都期望能够实现实时的业务估值,快速获取最新的数据和指标,从而做出更明智的投资决策。…

PostGIS轨迹分析——AIS数据删除异常点

点位连成线 select st_makeline(t.the_geom) from (select the_geomfrom pointswhere name = xxxand point_time > 2023-09-01and point_time < 2023-09-03order by point_time

【数组的使用续篇】

文章目录 以数组的形式打印数组打印方法&#xff1a;Arrays.toString(数组名) 数组排序大小排序方法是 Arrays.sort(数组名) 创建一个自己的打印数组的方法自己创建一个冒泡排序两数之间交换方法 逆置数组打印核心思路还是 i 和 j 交换 总结 以数组的形式打印数组 打印方法&am…

[Python进阶] 操纵鼠标:PyAutoGUI

6.4 操纵鼠标&#xff1a;PyAutoGUI 6.4.1 说明 PyAutoGUI是一个Python的GUI自动化工具&#xff0c;它可以让程序自动控制鼠标和键盘的一系列操作。它能够模拟鼠标的移动、点击、拖拽等操作&#xff0c;以及键盘的按键按下和释放等操作。PyAutoGUI还提供了其他功能&#xff0…

用java语言写一个RSA方式的数据签名、验签,服务端和客户端双方各生成一对RSA公私钥,并交换公钥。己方私钥用于加密,对方公钥用于验签,代码实例类编写。

以下是一个使用Java编写的RSA方式的数据签名和验签的示例代码。在该示例中&#xff0c;服务端和客户端分别生成RSA公私钥对&#xff0c;并进行公钥交换。 java Copy code import java.nio.charset.StandardCharsets; import java.security.*; import java.util.Base64; publi…