problem description
in our project, the foreground and background are connected by websocket, and the vue framework is used throughout the project. The background transmission frequency of websocket is 4 times / s , and the amount of data each time is 2KB . The foreground uses the onmessage method to receive the data and then uses the this.$set () method to update the data into the array. In this process, there is a problem of memory leak, which is characterized by a sharp increase in chrome memory.
what methods have you tried
after Baidu and google, and after their own tests, it is found that Vue"s excessive this.$set method will lead to memory leakage, but direct assignment and replacement will not, so all this.$set methods update data to re-copy, which is found to effectively reduce the problem of memory leakage. But it has not been completely solved. In the test, after commenting out all of websocket"s onmessage method, I found that chrome memory rose at the same rate as after the previous modification. When the entire websocket is commented out, the chrome memory no longer increases.
related codes
this is the logic for processing data
function onMessage(evt, containerName) {
var containerIndex = vm.containerJson[containerName];
if (!vm.flaginit[containerIndex]) {
try {
var request = JSON.parse(evt.data);
}catch (e) {
console.log(e);
return false;
}
var newIndex = containerIndex;
for (var i = 0; i < vm.pageContainer.length; iPP) {
if (vm.pageContainer[i].Name == containerName) {
newIndex = i;
break;
}
}
vm.$set(vm.dynaDatas, containerIndex, request);
console.log(request);
if (request.msg != "Open") {
if (vm.pageContainer[newIndex].Type === "remote" || vm.pageContainer[newIndex].Type === "data") {
if (request.Live != undefined) {
that.circleId[newIndex] = 0; //0
that.$set(that.stopOrStart, containerIndex, "true");
that.clickButton(newIndex, true);
that.realTimePlayList(vm.pageContainer[newIndex].Name, request.Live, playListNum, 1, newIndex);
that.timebar[containerIndex] = that.$refs.progress[0].offsetWidth; //
clearInterval(that.PlayBackMode[containerIndex]);
var name = that.pageContainer[newIndex].Name;
// that.PlayBackMode[containerIndex] = setInterval(function () {
// // that.getPlayList(name, request.Live, playlistsix, 1, containerIndex);
// }, 5000);
that.pageContainer[newIndex].showData = "true";//
}
else {
if (request.data != "{}" && request.statuscode == "200" && request.msg != "Pause" && request.data.Time != undefined) {
if (request.data.Time != undefined) {
vm.dataTime[containerIndex] = request.data.Time;//h5
vm.noData[containerIndex] = new Date(request.data.Time.split("-")[0].split(":").join("-") + " " + request.data.Time.split("-")[1]).getTime();
vm.shipTime[containerIndex] = formatDuring(vm.noData[containerIndex] - standardTime);
}
if (vm.pageContainer[newIndex].select == "true") { //
var data = [vm.test];
console.log(vm.timeBar[0]);
if (data.length != 0) {
data[vm.activeTimeIndex[containerIndex]].Active =
(vm.noData[containerIndex] - 1502727683750) / (1502727683779 - 1502727683750);
//
if (vm.timeBar[containerIndex] == "4" && data[data.length - 1].Active >= data[data.length - 1].End) {
vm.websocket[containerIndex].send("Pause");
that.$set(that.stopOrStart, containerIndex, "false");
that.clickButton(newIndex, false);
}
}
function beforeTimeEnd(m) {//
if (m <= -1) {
return 1
} else {
data[m].Active = data[m].End - 0;
return beforeTimeEnd(m - 1);
}
}
function afterTimeStart(m) {//
if (m >= data.length) {
return 1
} else {
data[m].Active = data[m].Start;
return afterTimeStart(m + 1);
}
}
for (var m = 0, l = data.length; m < l; mPP) {
if (data[vm.activeTimeIndex[containerIndex]].Active >= data[m].Start && data[vm.activeTimeIndex[containerIndex]].Active <= data[m].End) {
data[m].Active = data[vm.activeTimeIndex[containerIndex]].Active;
that.activeTimeIndex[containerIndex] = m;
beforeTimeEnd(m - 1);
afterTimeStart(m + 1);
}
}
data = null;
startTimeStamp = null;
endTimeStamp = null;
}
else if (request.data == "") {
var circle = vm.pageContainer[newIndex].listData[0].Circle[vm.timeBar[containerIndex]];
var data = vm.pageContainer[newIndex].listData[0].Circle[vm.timeBar[containerIndex]].Data;
if (data[vm.activeTimeIndex[containerIndex]].Active > data[data.length - 1].Start) {
if (vm.timeBar[containerIndex] == "4" && request.data == "") { //5End
vm.websocket[containerIndex].send("Pause");
that.$set(that.stopOrStart, containerIndex, "false");
that.clickButton(newIndex, false);
} else {
that.$set(that.stopOrStart, containerIndex, "false");
that.clickButton(newIndex, false);
circle.select = "false";
vm.timeBar[containerIndex]PP;
that.circleId[containerIndex] = vm.timeBar[containerIndex];//
vm.activeTimeIndex[containerIndex] = 0;
that.timebar[containerIndex] = that.$refs.progress[0].offsetWidth; //
circle.select = "true";
that.$set(that.stopOrStart, containerIndex, "true");
that.clickButton(newIndex, true);
if (data.length != 0) {
vm.nextCircvarime[containerIndex] = Math.round(data[0].Start * 90 * 60);
vm.nextCircvarimeHour[containerIndex] = parseInt(vm.nextCircvarime[containerIndex] / 3600);
vm.nextCircvarimeMin[containerIndex] = parseInt(vm.nextCircvarime[containerIndex] % 3600 / 60);
vm.nextCircvarimeSec[containerIndex] = parseInt(vm.nextCircvarime[containerIndex] % 3600 % 60);
vm.nextCircvarimeH[containerIndex] = Number(vm.nextCircvarimeHour[containerIndex]) + Number(circle.Start[1].split(":")[0]);
vm.nextCircvarimeM[containerIndex] = Number(vm.nextCircvarimeMin[containerIndex]) + Number(circle.Start[1].split(":")[1]);
vm.nextCircvarimeS[containerIndex] = Number(vm.nextCircvarimeSec[containerIndex]) + Number(circle.Start[1].split(":")[2]);
if (vm.nextCircvarimeS[containerIndex] > 60) {
vm.nextCircvarimeS[containerIndex] = vm.nextCircvarimeS[containerIndex] - 60;
vm.nextCircvarimeM[containerIndex] = vm.nextCircvarimeM[containerIndex] + 1;
} else {
if (vm.nextCircvarimeM[containerIndex] > 60) {
vm.nextCircvarimeM[containerIndex] = vm.nextCircvarimeM[containerIndex] - 60;
vm.nextCircvarimeH[containerIndex] = vm.nextCircvarimeH[containerIndex] + 1;
} else {
if (vm.nextCircvarimeH[containerIndex] > 23) {
vm.nextCircvarimeH[containerIndex] = 0;
} else {
vm.nextCircvarimeH[containerIndex] = vm.nextCircvarimeH[containerIndex];
}
vm.nextCircvarimeM[containerIndex] = vm.nextCircvarimeM[containerIndex];
}
vm.nextCircvarimeS[containerIndex] = vm.nextCircvarimeS[containerIndex];
}
vm.nextCircvarime[containerIndex] = vm.nextCircvarimeH[containerIndex] + ":" + vm.nextCircvarimeM[containerIndex] + ":" + vm.nextCircvarimeS[containerIndex] + ":" + "000";
vm.nextstartNextTime[containerIndex] = circle.Start[0] + "-" + vm.nextCircvarime[containerIndex];
if (vm.pageContainer[newIndex].Type === "remote" || vm.pageContainer[newIndex].Type === "data") {
vm.websocket[containerIndex].send("Play" + ";" + vm.nextstartNextTime[containerIndex] + ";");
vm.pageContainer[newIndex].showData = "true";
}
}
}
} else {
vm.activeTimeIndex[containerIndex]PP;
vm.stageTime[containerIndex] = Math.round(data[vm.activeTimeIndex[containerIndex]].Start * 90 * 60);
vm.stageTimeHour[containerIndex] = parseInt(vm.stageTime[containerIndex] / 3600);
vm.stageTimeMin[containerIndex] = parseInt(vm.stageTime[containerIndex] % 3600 / 60);
vm.stageTimeSec[containerIndex] = parseInt(vm.stageTime[containerIndex] % 3600 % 60);
vm.stageTimeH[containerIndex] = Number(vm.stageTimeHour[containerIndex]) + Number(circle.Start[1].split(":")[0]);
vm.stageTimeM[containerIndex] = Number(vm.stageTimeMin[containerIndex]) + Number(circle.Start[1].split(":")[1]);
vm.stageTimeS[containerIndex] = Number(vm.stageTimeSec[containerIndex]) + Number(circle.Start[1].split(":")[2]);
if (vm.stageTimeS[containerIndex] > 60) {
vm.stageTimeS[containerIndex] = vm.stageTimeS[containerIndex] - 60;
vm.stageTimeM[containerIndex] = vm.stageTimeM[containerIndex] + 1;
} else {
if (vm.stageTimeM[containerIndex] > 60) {
vm.stageTimeM[containerIndex] = vm.stageTimeM[containerIndex] - 60;
vm.stageTimeH[containerIndex] = vm.stageTimeH[containerIndex] + 1;
} else {
if (vm.stageTimeH[containerIndex] > 23) {
vm.stageTimeH[containerIndex] = 0;
} else {
vm.stageTimeH[containerIndex] = vm.stageTimeH[containerIndex];
}
vm.stageTimeM[containerIndex] = vm.stageTimeM[containerIndex];
}
vm.stageTimeS[containerIndex] = vm.stageTimeS[containerIndex];
}
vm.nextTime[containerIndex] = vm.stageTimeH[containerIndex] + ":" + vm.stageTimeM[containerIndex] + ":" + vm.stageTimeS[containerIndex] + ":" + "000";
vm.CircleStartTime[0] = vm.CircleStartTime[0];
vm.startNextTime[containerIndex] = vm.CircleStartTime[0] + "-" + vm.nextTime[containerIndex];
vm.websocket[containerIndex].send("Play" + ";" + vm.startNextTime[containerIndex] + ";");
vm.pageContainer[newIndex].showData = "true";
}
}
}
var detailData = [];
var k = 0;
if (request.data != undefined) {
if (request.data.Params != undefined) {
for (var j in request.data.Params) {
var dataObj = {};
if (j != "Image") {
dataObj.name = j;
dataObj.content = request.data.Params[j].split(";");
detailData[kPP] = dataObj;
}
}
//
for (var j = 0; j < vm.pageContainer[newIndex].Topic.length; jPP) {
for (var k = 0; k < detailData.length; kPP) {
if (vm.pageContainer[newIndex].Topic[j].Codename["0"].Content == detailData[k].name) {
var dataObj = {};
dataObj.code = detailData[k].content[0];
dataObj.result = detailData[k].content[1];
dataObj.mean = detailData[k].content[2];
dataObj.beyond = detailData[k].content[3];
vm.$set(vm.pageContainer[newIndex].Topic[j], "dynData", dataObj);
}
}
}
} else {
request.data = detailData;
}
}
}
}
}comment out the onmsaage method continues to rise
// name.onmessage = function (evt) {
// // onMessage(evt, containerName);
// };expected results
it is hoped that chrome memory will not continue to rise during the use of websocket