账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue多页面应用,页面切换后,内存未释放
    18
    0

    项目框架:

    vuejs+iview
    每个页面都是直接引用vuejs的库,并且new了一个新的vue实例

    由于项目原因

    无法使用webpack和vue-router做成单页面应用。(暂时) 浏览器环境都是IE浏览器,

    问题复现

    我使用了IE11提供的内存监听工具(快捷键ctrl+shift+u)(或使用任务管理的内存监听), 可以发现页面在切换or刷新后,
    甚至页面切换至一个空的页面后, 内存并没有得到释放,

    例如

    原有内存是100Mb,页面操作后增加至150MB,页面跳转至一个空的内容页,内存还是150MB,或者降低了一些,但还是大于100MB

    想请教

    如何在页面离开or刷新后销毁所有已经创建的vue实例和javascript 对象。

    请问是否有办法!
    水平不足,虚心请教,

    2
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • Pasttense 普通会员 1楼

      在 Vue 多页面应用中,当页面发生切换后,理论上旧页面的组件应当从内存中释放,以防止内存泄漏。然而,如果出现页面切换后内存未释放的情况,可能存在以下原因:

      1. 路由缓存:Vue Router 提供了 keep-alive 功能来缓存页面,如果在路由配置或者 <router-view> 标签上启用了此功能,那么即使切换到其他页面,该页面也不会被销毁,而是保持在内存中。确认是否使用了此功能,并根据实际需求调整。

      javascript // 路由配置中的例子 { path: '/foo', component: Foo, meta: { keepAlive: true } // 是否缓存此页面 }

      ```html

      ```

      1. 全局事件监听或定时器未清除:确保在组件的 beforeDestroydestroyed 生命周期钩子中清理所有全局事件监听器和定时器。

      javascript beforeDestroy() { this.$off(); // 解绑所有事件 clearTimeout(this.timerId); // 清除定时器 }

      1. 第三方库资源未释放:检查是否有一些第三方库(如 WebSocket、视频播放器等)在组件销毁时没有正确关闭或释放资源。

      2. 内部引用导致的循环引用:例如,组件实例引用了全局变量或其他对象,而这些对象又反过来引用了组件实例,可能导致垃圾回收机制无法正常工作。需要检查并解除这样的循环引用。

      3. 浏览器缓存:虽然不常见,但某些情况下,由于浏览器自身的机制,可能不会立即释放内存。可以尝试强制刷新页面(Ctrl + F5)看是否会释放内存。

      请根据以上情况排查代码,找出问题所在并进行相应优化。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部