zoukankan      html  css  js  c++  java
  • Vue优化:常见会导致内存泄漏问题及优化

    1. 监听在window/body等事件没有解绑
    2. 绑在EventBus的事件没有解绑
    3. 模块形成的闭包内部变量使用完后没有置成null
    4. 使用第三方库创建,没有调用正确的销毁函数
    5 . echarts问题: 
    不要把chart实例赋值在this上。(this对象一直存在不会被回收)
    析构掉生成的echarts对象。
    //-dom 不存在时不画
    if (!this.$refs.barchart) {
    return
    }
    //- 不要重复初始化
    let Chart = echarts.getInstanceByDom(this.$refs.barchart)
    if (!Chart) {
    Chart = echarts.init(this.$refs.barchart, 'light')
    }
    //-释放echarts对象
    beforeDestroy () {
    let dcharts = echarts.getInstanceByDom(this.$refs.barchart)
    if (dcharts) {
    echarts.dispose(dcharts)
    }
    },
    6. keep-alive 的 include 里存的其实是一个 vuex 中的一个数据源(数据源保存的是路由名称),当关闭标签页时,这个数据源中的一项会被移除。这之前,我们在组件里监听到这个数据源的变化,如果此组件对应的路由(这个路由应在 mounted 的时候保存下来)已经不在数据源中了,那就应该销毁此组件。this.$destroy("组件名,es6写法就是class类名") 这一步在新的架构里面已经做了

    7. setTimeout setInterval清理 (最好不用)可以使用nextTick代替

    8. 数据量多引起的内存占用严重,减少数据, 简化vue实例对象的数据量,减少内存开销

    9 . vue是单页面,页面路由切换后,内存未释放

    10 . 如果在mounted/created 钩子中使用了$on,需要在beforeDestroy 中做对应解绑($off)处理

    11. 如果在mounted/created 钩子中绑定了DOM/BOM 对象中的事件,需要在beforeDestroy 中做对应解绑处理

    12. 如果在mounted/created 钩子中使用了第三方库初始化,需要在beforeDestroy 中做对应销毁处理

    13. Vue官网讲解避免内存泄露 https://cn.vuejs.org/v2/cookbook/avoiding-memory-leaks.html (我们erp没有 Choices.js库,所以不存在)

    14 闭包导致,比如事件处理回调,导致DOM对象和脚本中对象双向引用,这个时常见的泄漏原因

    16 js实例 用完 未被清理

    17 JavaScript 内存泄露 : 1.意外的全局变量 2.被遗忘的计时器或回调函数 3.脱离 DOM 的引用 4.闭包

  • 相关阅读:
    Eureka获取服务列表源码解析
    Eureka客户端续约及服务端过期租约清理源码解析
    Eureka应用注册与集群数据同步源码解析
    Eureka重要对象简介
    EurekaClient自动装配及启动流程解析
    idea2019注册码
    EurekaServer自动装配及启动流程解析
    程序员的算法课(5)-动态规划算法
    程序员的算法课(4)-二分查找
    程序员的算法课(3)-递归(recursion)算法
  • 原文地址:https://www.cnblogs.com/plBlog/p/11429939.html
Copyright © 2011-2022 走看看