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

src/views/charts2/Panel.vue

@@ -109,7 +109,7 @@ export default {
     //   }
     // }
     timeFilter: {
-      handler (n) {
+      handler () {
         if (this.$route.path === '/panel/networkAppPerformance' && (this.queryCondition || this.networkOverviewBeforeTab)) {
           this.scoreCalculation()
         }
@@ -120,7 +120,7 @@ export default {
     // this.panelName = this.$store.getters.getPanelName
     const pName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : ''
     const curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
-    if(this.$route.params.typeName === fromRoute.dnsServiceInsights) {
+    if (this.$route.params.typeName === fromRoute.dnsServiceInsights) {
       this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
       this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
       this.$store.commit('setDnsQtypeMapData', this.dnsQtypeMapData)
@@ -200,7 +200,7 @@ export default {
       this.scoreCalculation()
     }
   },
-  setup (props, ctx) {
+  setup (props) {
     // todo 目前在panel页面测试，后续会挪到router里
     const store = useStore()
     const cancelList = store.state.panel.httpCancel
@@ -359,7 +359,7 @@ export default {
       } else {
         condition = this.queryCondition
       }
-      let type = this.dimensionType || this.networkOverviewBeforeTab
+      const type = this.dimensionType || this.networkOverviewBeforeTab
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
@@ -428,6 +428,10 @@ export default {
         routerObj.query = query
       }
     }
+
+    this.emitter.off('reloadChartList')
+    this.$store = null
+    this.emitter = null
   }
 }
 </script>

src/views/charts2/charts/linkMonitor/LinkBlock.vue

@@ -154,7 +154,7 @@ export default {
   },
   watch: {
     timeFilter: {
-      handler (n) {
+      handler () {
         this.init()
       }
     }
@@ -167,7 +167,8 @@ export default {
     init () {
       this.toggleLoading(true)
       // 链路基本信息
-      let linkInfo = localStorage.getItem(storageKey.linkInfo)
+      let linkInfo = null
+      linkInfo = localStorage.getItem(storageKey.linkInfo)
       linkInfo = JSON.parse(linkInfo)
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
@@ -383,6 +384,9 @@ export default {
 
       return newValue
     }
+  },
+  beforeUnmount () {
+    this.unitConvert = null
   }
 }
 </script>

src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue

@@ -220,7 +220,7 @@ export default {
             this.nextGridData = nextGridData
           }
         } else {
-          this.isNextNoData = true
+          this.isNextNoData = false
           this.isNextShowError = true
           this.nextErrorMsg = res[1].message
         }

src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue

@@ -428,6 +428,9 @@ export default {
     }
   },
   mounted () {
+    this.myChart = null
+    this.myChart2 = null
+    this.chartOption = null
     this.timer = setTimeout(() => {
       this.linkTrafficSankeyDataRequest(this.tab)
     }, 100)
@@ -436,6 +439,19 @@ export default {
   beforeUnmount () {
     clearTimeout(this.timer)
     window.removeEventListener('resize', this.resize)
+    if (this.myChart) {
+      this.myChart.dispose()
+      // 避免不能生效
+      this.myChart = null
+    }
+    if (this.myChart2) {
+      this.myChart2.dispose()
+      this.myChart2 = null
+    }
+    this.chartOption = null
+
+    this.cnLinkInfo = null
+    this.unitConvert = null
   }
 }
 </script>

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
   }

src/views/charts2/charts/npm/NpmEventsByType.vue

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

src/views/charts2/charts/npm/NpmLine.vue

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

src/views/charts2/charts/npm/NpmNetworkQuantity.vue

@@ -50,7 +50,9 @@ export default {
       npmNetworkLastCycleData: [],
       npmNetworkData: [],
       side: '',
-      chartData: {}
+      chartData: {},
+      timer1: null,
+      timer2: null
     }
   },
   watch: {
@@ -179,7 +181,7 @@ export default {
           if (timer) {
             clearTimeout(timer)
           }
-          timer = setTimeout(() => {
+          this.timer1 = setTimeout(() => {
             this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
           }, 300)
         }).catch((e) => {
@@ -188,7 +190,7 @@ export default {
             clearTimeout(timer)
           }
           this.npmNetworkLastCycleData = [e]
-          timer = setTimeout(() => {
+          this.timer2 = setTimeout(() => {
             this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
           }, 300)
         }).finally(() => {
@@ -276,6 +278,10 @@ export default {
       this.chartData = _.cloneDeep(this.chart)
     }
     this.npmNetworkCycleQuery()
+  },
+  beforeUnmount () {
+    clearTimeout(this.timer1)
+    clearTimeout(this.timer2)
   }
 }
 </script>

src/views/charts2/charts/npm/NpmTrafficLine.vue

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