• js造成内存泄漏的几种情况


    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状态时,子组件重新展示,内存飙升,重复几次切换后,内存飙升明显,页面卡顿。

  • 相关阅读:
    Matlab矩阵填充--Matlab interp2
    Object::connect: No such slot (QT槽丢失问题)
    QT显示框架嵌入Vs控制台工程
    SLAM: 关于Orb_SLAM的使用小综述
    SLAM: Orb_SLAM中的ORB特征
    Ubuntu安装中文语言包
    装X数学:高雅的数学表示
    图像描述:各种维度图像的逻辑描述形式
    Python__configparser模块
    Python__xml模块
  • 原文地址:https://www.cnblogs.com/xiaocuncheng/p/11101698.html
Copyright © 2020-2023  润新知