gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
刘洪洪
2022-11-29 17:21:01 +08:00
parent 2cf206de5a
commit e89fc78aca
12 changed files with 83 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/charts2/Panel.vue
View File

@@ -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>

8
src/views/charts2/charts/linkMonitor/LinkBlock.vue
View File

@@ -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>

2
src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
View File

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

16
src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue
View File

@@ -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>

2
src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
View File

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

17
src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
View File

@@ -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>

2
src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
View File

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

19
src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
View File

@@ -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
}

2
src/views/charts2/charts/npm/NpmEventsByType.vue
View File

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

1
src/views/charts2/charts/npm/NpmLine.vue
View File

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

12
src/views/charts2/charts/npm/NpmNetworkQuantity.vue
View File

@@ -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>

1
src/views/charts2/charts/npm/NpmTrafficLine.vue
View File

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