【VUE】监控大屏运行时间长后卡顿,如何解决

项目中遇到一个问题,监控大屏共五页,前后翻页依据路由跳转,其中有两页每分钟刷新5万+数据并在地图上打点,运行时间长了会出现卡顿,甚至卡死情况。

初始方案

上一个开发人员做了这样的处理:在销毁数据量大的大屏页面前,强制刷新当前页面

beforeDestroy() {
	location.reload()
},

这样做可以在切换页面时清除了浏览器已存在的内存,但强制刷新会使页面出现短暂白屏,影响体验
然后踏上了寻找解决办法之路

–首先,我查找了vue刷新页面的方式都有哪些
原文:https://www.jb51.net/javascript/292692fh9.htm

  1. 使用 location.reload() 方法进行页面刷新:这个方法会重新加载当前页面,类似于用户点击浏览器的刷新按钮。
  2. 在路由跳转时,使用 $router.go(0) 方法实现当前页面的刷新:会重新加载当前路由所对应的组件,相当于重新渲染页面。
  3. 在组件中,通过设置组件的 key 属性来触发组件的重新渲染,从而实现页面的刷新。
<my-component :key="refreshKey"></my-component>
  1. 使用 window.location.href = window.location.href 实现当前页面的刷新。
  2. 使用 window.location.reload(true) 方法实现当前页面的刷新,其中 true 表示强制使用缓存刷新。
  3. 使用 meta 标签中的 http-equiv 属性设置为 refresh 实现页面的自动刷新;但是,使用 meta 标签实现的自动刷新功能,用户无法手动停止刷新或者修改刷新时间间隔,可能会对用户体验造成一定程度的影响。
  4. 在需要刷新的组件中,通过 $forceUpdate() 方法实现组件的强制更新,从而实现页面的刷新。

这些方式或多或少都存在不符合需求的点,所以全部放弃。

–然后,我想关注下如何清理浏览器内存,只要在切换页面时清除内存也可以达到目的

VUE内存泄漏排查
泄漏原因:js闭包、全局变量、dom事件监听、循环定时器、组件的泄漏导致DOM上挂载的事件、对象数组等的数据也跟着无法释放。
排查:

  • echarts图是否在页面销毁时彻底删除
    每个图组件的生命周期函数中都做了删除操作
this.myChart.dispose();
this.myChart = null;
  • setTimeOut和setInterval是否清除
    beforeDestroy()中已清除定时器
  • 全局变量是否清除
    没有使用全局变量

在代码中检查后,以上三个问题均未发现,且在销毁页面前,对地图也做了销毁处理

    this.amapManager.getMap().destroy();
    this.amapManager = null;

我还在生命周期beforeDestroy中,将所有变量置为null;
在生命周期beforeDestroy中销毁组件,

	this.$destroy()

调用vue的刷新方式

	this.$forceUpdate()

都没有很好的效果。

–关注到测试提出不想要刷新后的白屏效果,我又查找刷新不出现白屏,一个局部刷新的方法:
原文:https://blog.csdn.net/m0_53912016/article/details/126302923
APP.vue

<template>
    <div id="app">
    	<router-view v-if="isRouterAlive"></router-view>
	</div>
</template>
<script>
    export default {
        name: 'App',
        provide () {    //父组件中通过provide来提供变量,在子组件中通过inject来注入变量。                                             
            return {
                reload: this.reload                                              
            }
        },
        data() {
            return{
                isRouterAlive: true                    //控制视图是否显示的变量
            }
        },
        methods: {
            reload () {
                this.isRouterAlive = false;            //先关闭,
                this.$nextTick(function () {
                    this.isRouterAlive = true;         //再打开
                }) 
            }
        },
    }
</script>

页面中

export default {
  inject:['reload'], //注入reload方法
  data() {
	return{
	}
}

需要刷新页面时

this.reload();

这种方法确实可以达到刷新页面且不白屏的效果,为每个大屏页面都添加此方法,发现浏览器内存并不会持续上涨,在数据量小且逻辑处理简单的页面会下降,故暂时采取此方案。
在数据量大、处理逻辑复杂页面,仍然会占用很高内存,后续将优化接口请求、数据渲染方式。
如有更好的方案,还请大佬们指点~~在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值