1、介绍js的垃圾回收机制

  js的垃圾回收机制就是为了防止内存泄漏的,内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着,垃圾回收机制就是间歇的不定期的寻找到不再使用的变量,并释放掉它们所指向的内存。所以这里又涉及到变量的生命周期,当一个变量的生命周期结束之后它所指向的内存就应该被释放。JS有两种变量,全局变量和在函数中产生的局部变量。局部变量的生命周期在函数执行过后就结束了,此时便可将它引用的内存释放(即垃圾回收),但全局变量生命周期会持续到浏览器关闭页面。所以当我们过多的使用全局变量的时候也会导致内存泄漏的问题

2、主要存在内存泄漏的问题点

BOM / DOM对象泄漏
scipt中存在对BOM / DOM对象的引用
javaScript对象泄漏
闭包函数导致的泄漏
3、主要关注的代码点

DOM中的addEventLisner 函数及派生的事件监听, 比如Jquery 中的on 函数, vue 组件实例的 $on 函数,第三方库中的初始化函数
BOM对象的事件监听,比如webSocket的监听事件
避免不必要的函数引用
如果是要render函数,避免在html标签中DOM / BOM事件
4、在vue中如何处理内存泄漏的

如果在mounted/created 钩子中绑定了DOM/BOM 对象中的事件,需要在beforeDestroy 中做对应解绑处理
如果在mounted/created 钩子中使用了第三方库初始化,需要在beforeDestroy 中做对应销毁处理
如果组件中使用了定时器,需要在beforeDestroy 中做对应销毁处理
模板中不要使用表达式来绑定到特定的处理函数,这个逻辑应该放在处理函数中
如果在mounted/created 钩子中使用了$on,需要在beforeDestroy 中做对应解绑($off)处理
某些组件在模板中使用 事件绑定可能会出现泄漏,使用$on 替换模板中的绑定
Vue官网讲解避免内存泄露https://cn.vuejs.org/v2/cookbook/avoiding-memory-leaks.html

另外,vue 在IE edge浏览器下,父子组件的场景,子组件依赖父组件的状态,子组件控制父组件状态变化从而反馈给子组件的展示变化,子组件通过v-if模式存在于视图中,父组件通过状态控制子组件的v-if状态变换。子组件控制父组件状态完成子组件数据填充后,父组件切换子组件的v-if状态,子组件占用dom结构被清理。此时,子组件存在时的内存占用未被释放,当父组件再次回切v-if状态时,子组件重新展示,内存飙升,重复几次切换后,内存飙升明显,页面卡顿。

js造成内存泄漏的几种情况的更多相关文章

  1. Js内存泄漏的几种情况

    想解决内存泄露问题,必须知道什么是内存泄露,什么情况下出现内存泄露,才能在遇到问题时,逐个排除.这里只讨论那些不经意间的内存泄露. 一.什么是内存泄露 内存泄露是指一块被分配的内存既不能使用,又不能回 ...

  2. java内存泄漏的几种情况

    转载于http://blog.csdn.net/wtt945482445/article/details/52483944 Java 内存分配策略 Java 程序运行时的内存分配策略有三种,分别是静态 ...

  3. C++中内存泄漏的几种情况

    1. 在类的构造函数和析构函数中没有匹配的调用new和delete函数 两种情况下会出现这种内存泄露:一是在堆里创建了对象占用了内存,但是没有显示地释放对象占用的内存:二是在类的构造函数中动态的分配了 ...

  4. C++内存泄漏的几种情况

    1. 在类的构造函数和析构函数中没有匹配的调用new和delete函数 两种情况下会出现这种内存泄露:一是在堆里创建了对象占用了内存,但是没有显示地释放对象占用的内存:二是在类的构造函数中动态的分配了 ...

  5. Java内存泄漏的几种可能

    Java内存泄漏引起的原因: 内存泄漏是指无用对象(不再使用的对象)持续占有内存或无用对象的内存得不到及时释放,从而造成内存空间的浪费称为内存泄漏. 长生命周期的对象持有短生命周期对象的引用就很可能发 ...

  6. js内存泄露的几种情况

    想解决内存泄露问题,必须知道什么是内存泄露,什么情况下出现内存泄露,才能在遇到问题时,逐个排除.这里只讨论那些不经意间的内存泄露. 一.什么是内存泄露 内存泄露是指一块被分配的内存既不能使用,又不能回 ...

  7. js的内存泄漏场景、监控以及分析

    内存泄漏 Q:什么是内存泄漏? 字面上的意思,申请的内存没有及时回收掉,被泄漏了 Q:为什么会发生内存泄漏? 虽然前端有垃圾回收机制,但当某块无用的内存,却无法被垃圾回收机制认为是垃圾时,也就发生内存 ...

  8. js中this指向的三种情况

    js中this指向的几种情况一.全局作用域或者普通函数自执行中this指向全局对象window,普通函数的自执行会进行预编译,然后预编译this的指向是window //全局作用域 console.l ...

  9. js内存泄露的几种情况详细探讨

    内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束.在C++中,因为是手动管理内存,内存泄露是经常出现的事情.而现在流行的C#和Java等语言采用了自动垃圾回收方法管理内存,正常使 ...

随机推荐

  1. 2019暑假Java学习笔记(二)

    目录 基础语法(下) 流程控制 if语句 switch语句 while语句和do-while语句 for语句 break关键字 continue关键字 数组 一维数组 二维数组 用户输入操作 练习题: ...

  2. IDEA2019.2.1中文乱码解决

    写在前面 太晚了, 长话短说, idea更新到2019.2.1, 项目任何地方输入中文都是乱码, 修改编码UTF-8依然如此.参考https://blog.csdn.net/chenjk10/arti ...

  3. java excel给单元格增加批注(包含SXSSF)

    package javatest; import java.io.FileOutputStream; import java.io.IOException; import org.apache.poi ...

  4. 时间工具类DateUtil

    import java.sql.Timestamp; import java.text.ParseException; import java.text.SimpleDateFormat; impor ...

  5. 离线安装pycharm数据库驱动

    这个数据库驱动,不是python的链接包 而是打开pycharm pro版后的数据库浏览器驱动. 也就是专业版比社区版方便的一个地方,可以直接边写代码,边看数据库结构,还可以拖动一些变量. 在线安装挺 ...

  6. Spring MVC -- 验证器

    输入验证是Spring处理的最重要Web开发任务之一.在Spring MVC中,有两种方式可以验证输入,即利用Spring自带的验证框架,或者利用JSR 303实现.本篇博客将介绍这两种输入验证方法. ...

  7. 【机器学习之二】python开发spark案例

    环境 spark-1.6 python3.5 一.wordcount # -*- coding:utf-8 -*- ''' Created on 2019年5月13日 @author: Adminis ...

  8. Java中缓存的介绍

    一.什么是缓存1.Cache是高速缓冲存储器 一种特殊的存储器子系统,其中复制了频繁使用的数据以利于快速访问2.凡是位于速度相差较大的两种硬件/软件之间的,用于协调两者数据传输速度差异的结构,均可称之 ...

  9. mysql创建用户并授权Repl_slave_priv和Repl_client_priv

    CREATE USER 'test'@'localhost' IDENTIFIED BY 'test'; FLUSH PRIVILEGES; GRANT REPLICATION CLIENT ON * ...

  10. 学习数据结构Day4

    链表 之前看过了动态数组,栈和队列,虽然我们把第一个叫做动态数组,但是,他们的底层实质上还是静态数组.靠 resize来实现动态数组.而链表是真正的数据结构 链表需要一个节点. 数据存储在链表中 相当 ...