CN-815: 前端内存占用分析

src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue

@@ -737,6 +737,8 @@ export default {
     window.removeEventListener('resize', this.resize)
     clearTimeout(this.timerScroll)
     clearTimeout(this.timerSearch)
+    this.myChart = null
+    this.unitConvert = null
   }
 }
 </script>

src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue

@@ -388,7 +388,11 @@ export default {
       // 此处为验证是否因dom未销毁，导致图表出错，后续可能会改
       let dom = null
       dom = document.getElementById('overviewLineChart')
-      this.myChart = null
+      // this.myChart = null
+      if (this.myChart) {
+        this.myChart.dispose()
+        this.myChart = null
+      }
       this.myChart = echarts.init(dom)
       this.chartOption = stackedLineChartOption
       const chartOption = this.chartOption.series[0]
@@ -673,6 +677,8 @@ export default {
   mounted () {
     // todo 初始化鼠标事件，开启右键返回
     // this.domInit()
+    this.myChart = null
+    this.chartOption = null
     this.timer = setTimeout(() => {
       if (this.lineTab) {
         const data = this.mpackets.find(t => t.class === this.lineTab)
@@ -688,6 +694,15 @@ export default {
   beforeUnmount () {
     clearTimeout(this.timer)
     window.removeEventListener('resize', this.resize)
+
+    let myChart = echarts.getInstanceByDom(document.getElementById('overviewLineChart'))
+    if (myChart) {
+      echarts.dispose(myChart)
+    }
+    this.myChart = null
+    // 检测时发现该方法占用较大内存，且未被释放
+    this.unitConvert = null
+    myChart = null
   }
 }
 </script>

src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue

@@ -193,6 +193,8 @@ export default {
   beforeUnmount () {
     clearTimeout(this.timer)
     window.removeEventListener('resize', this.resize)
+    this.myChart = null
+    this.myChart2 = null
   }
 }
 </script>

src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue

@@ -1770,6 +1770,13 @@ export default {
   },
   async mounted () {
     console.log('mounted start...')
+    this.list = null
+    this.tabList = null
+    this.allList = null
+    this.drillDownTableConfigs = null
+    this.curTable = null
+    this.commonColumnList = null
+
     this.userId = localStorage.getItem(storageKey.userId)
     this.drillDownTableConfigs = await combinDrilldownTableWithUserConfig()
     this.tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
@@ -1854,6 +1861,18 @@ export default {
   },
   setup (props) {
   },
+  beforeUnmount () {
+    // 以下元素，检测到内存并未释放
+    this.list = null
+    this.tabList = null
+    this.allList = null
+    this.drillDownTableConfigs = null
+    this.curTable = null
+    this.commonColumnList = null
+    this.networkTable = null
+    this.tableData = null
+    this.tableDataBackup = null
+  },
   unmounted () {
     this.isNoData = false
   }