js中的内存泄漏

news2024/11/17 13:43:07

简版

  • 内存泄漏一般是指变量的内存没有及时的回收,导致内存资源浪费。一般有三种情况出现内存泄露比较多。(1)常见的声明了一个全局变量,但是又没有用上,那么就有点浪费内存了,(2)定时器没清除 (3)循环引用:A 对象里面有一个属性指向 B 对象,B 对象有一个属性指向 A 对象。互相引用
  • 解决内存泄露:我们编译器有一个自动的内存清理。常见的主要是引用记数 和 标记清除。 谷歌浏览器主要是用标记清除,大概流程是给每一个变量添加一个标记,通过内部算法计算引用情况,当不使用的时候就会自动清除。如果遇到定时器的话,我一般会在页面关闭的时候手动清除。如果遇到循环引用,我一般会手动把变量赋值为 null 来清除

一、是什么

image.png

内存泄漏(Memory leak)是在计算机科学中,由于疏忽或错误造成程序未能释放已经不再使用的内存

并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前就失去了对该段内存的控制,从而造成了内存的浪费

程序的运行需要内存。只要程序提出要求,操作系统或者运行时就必须供给内存

对于持续运行的服务进程,必须及时释放不再用到的内存。否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃

image.png
C语言中,因为是手动管理内存,内存泄露是经常出现的事情。

char * buffer;
buffer = (char*) malloc(42);

// Do something with buffer

free(buffer);

上面是 C 语言代码,malloc方法用来申请内存,使用完毕之后,必须自己用free方法释放内存。

这很麻烦,所以大多数语言提供自动内存管理,减轻程序员的负担,这被称为"垃圾回收机制"

二、垃圾回收机制

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

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

通常情况下有两种实现方式:

  • 标记清除
  • 引用计数

标记清除

JavaScript最常用的垃圾收回机制

当变量进入执行环境是,就标记这个变量为“进入环境“。进入环境的变量所占用的内存就不能释放,当变量离开环境时,则将其标记为“离开环境“

垃圾回收程序运行的时候,会标记内存中存储的所有变量。然后,它会将所有在上下文中的变量,以及被在上下文中的变量引用的变量的标记去掉

在此之后再被加上标记的变量就是待删除的了,原因是任何在上下文中的变量都访问不到它们了

随后垃圾回收程序做一次内存清理,销毁带标记的所有值并收回它们的内存

举个例子:

var m = 0,
  n = 19 // 把 m,n,add() 标记为进入环境。
add(m, n) // 把 a, b, c标记为进入环境。
console.log(n) // a,b,c标记为离开环境,等待垃圾回收。
function add(a, b) {
  a++
  var c = a + b
  return c
}

引用计数

语言引擎有一张"引用表",保存了内存里面所有的资源(通常是各种值)的引用次数。如果一个值的引用次数是0,就表示这个值不再用到了,因此可以将这块内存释放

如果一个值不再需要了,引用数却不为0,垃圾回收机制无法释放这块内存,从而导致内存泄漏

const arr = [1, 2, 3, 4]
console.log('hello world')

面代码中,数组[1, 2, 3, 4]是一个值,会占用内存。变量arr是仅有的对这个值的引用,因此引用次数为1。尽管后面的代码没有用到arr,它还是会持续占用内存

如果需要这块内存被垃圾回收机制释放,只需要设置如下:

arr = null

通过设置arrnull,就解除了对数组[1,2,3,4]的引用,引用次数变为 0,就被垃圾回收了

小结

有了垃圾回收机制,不代表不用关注内存泄露。那些很占空间的值,一旦不再用到,需要检查是否还存在对它们的引用。如果是的话,就必须手动解除引用

三、常见内存泄露情况

意外的全局变量

function foo(arg) {
  bar = 'this is a hidden global variable'
}

另一种意外的全局变量可能由 this 创建:

function foo() {
  this.variable = 'potential accidental global'
}
// foo 调用自己,this 指向了全局对象(window)
foo()

上述使用严格模式,可以避免意外的全局变量

定时器也常会造成内存泄露

var someResource = getData();
setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        // 处理 node 和 someResource
        node.innerHTML = JSON.stringify(someResource));
    }
}, 1000);

如果id为 Node 的元素从DOM中移除,该定时器仍会存在,同时,因为回调函数中包含对someResource的引用,定时器外面的someResource也不会被释放

包括我们之前所说的闭包,维持函数内局部变量,使其得不到释放

function bindEvent() {
  var obj = document.createElement('XXX')
  var unused = function () {
    console.log(obj, '闭包内引用obj obj不会被释放')
  }
  obj = null // 解决方法
}

没有清理对DOM元素的引用同样造成内存泄露

const refA = document.getElementById('refA')
document.body.removeChild(refA) // dom删除了
console.log(refA, 'refA') // 但是还存在引用能console出整个div 没有被回收
refA = null
console.log(refA, 'refA') // 解除引用

包括使用事件监听addEventListener监听的时候,在不监听的情况下使用removeEventListener取消对事件监听

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

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

相关文章

【Vue3】用Element Plus实现列表界面

🏆今日学习目标:用Element Plus实现列表界面 😃创作者:颜颜yan_ ✨个人格言:生如芥子,心藏须弥 ⏰本期期数:第四期 🎉专栏系列:Vue3 文章目录前言效果图目录简介修改vite…

uniapp微信小程序实现连接低功耗蓝牙打印功能

微信小程序项目中有使用到蓝牙连接打印,参考官方文档做了一个参考笔记,这样使用的时候就按着步骤查看。 uni-app蓝牙连接 蓝牙: 1、初始化蓝牙 uni.openBluetoothAdapter(OBJECT) uni.openBluetoothAdapter({success(res) {console.log(…

毫米波雷达的硬件架构与射频前端

说明 本篇博文梳理(车载)毫米波雷达的系统构成,特别地,对其射频前端各部件做细节性的原理说明。本篇博文会基于对这方面知识理解的加深以及读者的反馈长期更新内容和所附资料,有不当之处或有其它有益的参考资料可以在评论区给出,我…

vue3.x结合element-plus如何使用icon图标

基于 Vue 3的Element Plus如何使用icon图标 首先注意Element Plus版本:官网如图所示, 基于vue3的具体如何使用: 参考官网文档: 1.首先选择一种方式安装 2.然后全局注册图标 在main.js或main.ts文件中引入: import …

【web前端开发】CSS文字和文本样式

文章目录前言字体大小字体粗细字体样式字体font复合属性文本缩进文本水平对齐方式文本修饰线行高颜色标签水平居中⭐思维导图前言 本篇文章主要讲解CSS中的文字和文本样式及一些实用技巧.文章最后有思维导图. 字体大小 属性名:font-size 取值: 数字px 注意: 谷歌浏览器默认…

无法在web.xml或使用此应用程序部署的jar文件中解析绝对uri:[http://java.sun.com/jsp/jstl/core]

这是我在学习 JSTL 时产生的错误。没有使用 Maven 。 是手动引入 JSTL 包(jstl.jar 和 standard.jar)。在请求转发到 .jsp 界面,再没有使用 JSTL 语句前是通的,使用 JSTL 后就会报错。org.apache.jasper.JasperException: 无法在w…

【Vue】filter 过滤器用法

文章目录一、全局过滤器二、局部过滤器一、全局过滤器 语法&#xff1a; Vue.filter(name,function) - name: 过滤器名称 - function: 执行函数&#xff0c;必须有一个过滤后的返回值使用方法&#xff1a;变量名 | 过滤器名称 {{name | function()}}示例&#xff1a; <!D…

webpack的安装

webpack是当前前端最热门的前端资源模块化管理和打包工具。 安装webpack 首先要安装Node.js&#xff0c;Node.js自带了软件包管理工具npm&#xff0c;可以使用npm安装各种插件。Webpack至少需要Node.js v0.6版本&#xff0c;直接安装最新版就好了。 1.nodeJs官网&#xff0c…

Luckysheet本地导入时报错‘luckysheet‘ is not defined【已解决】

本文包含luckysheet本地安装以及报错解决&#xff0c;性子急可以直接按照目录划拉&#xff01; 目录 一、本地导入 二、报错luckysheet is not defined解决 最近正在开发的项目中需要类excel功能的东西&#xff0c;经过调研后决定用luckysheet&#xff0c;Luckysheet在线表格…

vite + vue3 —— vue地图大屏项目

​回顾 前期 ​ 前端利器 —— 提升《500倍开发效率》 传一张设计稿&#xff0c;点击一建生成项目 好牛_0.活在风浪里的博客-CSDN博客如果非要说它有什么缺点&#xff0c;那么我觉得就是它会&#xff0c;让你cv大法都没处使&#xff01;&#xff01;&#xff01;比如…

React 面向组件编程(下)

目录前言&#xff1a;一、受控组件与非受控组件1. 受控组件2. 非受控组件3. 效果展示4. 总结&#xff1a;二、组件的生命周期1. 对生命周期的理解2. 生命周期的三个阶段&#xff08;旧&#xff09;3. 生命周期的三个阶段&#xff08;新&#xff09;4. 新旧生命周期的区别5. 重要…

微信小程序项目实例——扫雷

今日推荐&#x1f481;‍♂️ 2023许嵩演唱会即将到来&#x1f3a4;&#x1f3a4;&#x1f3a4;大家一起冲冲冲&#x1f3c3;‍♂️&#x1f3c3;‍♂️&#x1f3c3;‍♂️ &#x1f52e;&#x1f52e;&#x1f52e;&#x1f52e;&#x1f52e;往期优质项目实例&#x1f52e…

JavaWeb之Cookie详解(一)

一.Cookie简介 Cookie是在HTTP协议下&#xff0c;服务器维护客户工作站上信息的一种方式&#xff0c;其作用是维护服务端与客户端浏览器的会话状态。由于HTTP协议的特点是无状态性&#xff0c;它对于事务处理没有记忆能力&#xff0c;所以服务端不会记录当前客户端浏览器的访问…

image-conversion 图片压缩,vue

image-conversion &#xff0c;vue&#xff0c;element 需求&#xff1a;需要用户上传图片时候&#xff0c;对大尺寸图片进行压缩&#xff0c;减小图片大小&#xff0c;减少服务器的压力。 用到的第三方插件image-conversion 文档&#xff1a; https://www.npmjs.com/packag…

vue2 前端导出el-table表格为Excel文件 (自带样式)

前话&#xff1a;我只是个自学到工作的小菜鸟&#xff0c;如果有大佬有更好的方法&#xff0c;希望不吝赐教。 1.电脑环境 node版本 14.20.0 vue-cli 4.4.0 (如果你的项目是vue-cli 5 版本&#xff08;即webpack5&#xff09;的会有很多问题&#xff0c;解决办法写在后边)…

echarts:实现3D地图版块叠加动效散点+轮播高亮效果

需求描述 如下图所示&#xff0c;展示3D效果的地图版块&#xff0c;并叠加显示动效散点&#xff1a; 实现思路 首先是3D地图版块效果的实现&#xff0c;可以参考广州3D地图&#xff1b;而动效散点的实现&#xff0c;可以参考地图发散分布。 这里再提一个经过尝试并不行的思…

大学生web前端期末大作业实例代码 (1500套,建议收藏) HTML+CSS+JS

文章目录&#x1f4da;web前端期末大作业 (1500套) 集合一、网页介绍二、网页集合&#x1f48c;表白网页 125套 (集合)&#x1f499;Echarts大屏数据展示 150套 (集合)一、基于HTMLEcharts技术制作二、基于VUEEcharts技术制作&#x1f381;更多源码&#x1f4da;web前端期末大作…

统计网站访问量(自己开发)

网站的运营者或者开发者肯定都想知道&#xff0c;自己网站每天的使用情况。比如每天有多少访问量、用户都点击哪些功能、用户对网站上哪些功能感兴趣。知道了这些信息才能定位网站后面的开发方向&#xff0c;比如持续优化点击率高的模块 、裁撤用户不感兴趣的模块&#xff0c;打…

【uniapp】上拉触底加载更多的两种方式,组件里面和页面里面 scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头

一般的话scroll-view在组件里面使用,而页面里面则使用onReachBottom()这个方法居多 1,onReachBottom 上拉触底后加载更多(未固定表头) 页面结构: <view class"box"><table border"0"><thead><th>名称</th><th style&qu…

解决axios异步请求问题(异步变为同步)

遇到的问题 在目前一个需求中&#xff0c;我需要等待axios请求完成后&#xff0c;判断请求是否出现异常&#xff0c;然后来判断是否关闭弹窗 修改后大概代码如下&#xff1a; async submitForm() {let flag false//表单验证&#xff0c;默认通过let formValidation truethis…