Javascript 在删除DOM元素时防止内存泄漏

我用Javascript开发已经有一段时间了，但是内存泄漏的问题有点让我难以理解。抱歉，这可能是一个很长的问题，但任何帮助都将不胜感激

我有一个日历格式的定制表格

#sxpSolutionTblWrap

，它使用一个模板动态填充，其中包含每天的详细信息。默认情况下，我在2周内加载，没有周末，因此我填充了10天的DOM元素

单击某一天调用一个函数

populateInfo panel

，在此函数中，我调用另一个函数

loadSingleSolutionRow

，在该函数中，我找到是否在表中选择了前一天并将其删除，然后用基本信息再次填充它，就好像它没有被选择一样

loadSingleSolutionRow 然后，我继续添加每天的事件，以for循环的形式加载到日历中，该循环删除了当天的DOM元素，并在

populateInfo面板

函数中将其替换为新的DOM元素

大众信息小组

for（var j=0；j

我遇到的问题是，当我点击一天又一天的时候，每次都会花费更长的时间。当一个解决方案在一个2周的网格上只有1-5天时，这是很好的，但是当一个解决方案在一个5周的网格上有20天长时，这是非常缓慢的，而且每天点击的时间更明显

populateInfo面板

大约有500行，不确定这是否与此有关。我不确定我删除元素的方法是否真的没有从内存中删除它们，如果是这样，我如何才能更有效地执行此操作？如果有任何帮助，将不胜感激

根据5周网格上10天的解决方案（网格上25天的DOM元素），这里是在两天之间单击30秒的时间线视图，您可以看到，第一次单击需要十分之八秒，而最后一次单击需要1.5秒，并且单击次数越多越明显

下面是几天之间单击30秒期间的一些堆快照，如果您需要进一步查看以更好地了解导致此问题的原因，这将非常有用

之前

比较

---

对不起，我忘了我之前在做实验，忘了删除本应是

$（'.sxpTableCol[data colid=“'+dow+']”）的内容。empty（）

因此，我删除了该元素中的所有子元素，稍后我将在同一个函数中填充这些子元素。我没有时间亲自查看这些子元素，但首先，检查“元素”选项卡，确保您实际上正在从DOM中删除节点。接下来，确保您没有在代码的其他地方保存对任何要删除的DOM节点的引用.heap Snapshot应该显示到gc根的路径。找到可以断开的边。抱歉，我忘记了之前的实验，忘记了删除本应为

$（'.sxpTableCol[data colid=“'+dow+']”）的边。empty（）

因此，我删除了该元素中的所有子元素，稍后我将在同一个函数中填充这些子元素。我没有时间亲自查看这些子元素，但首先，检查“元素”选项卡，确保您实际上正在从DOM中删除节点。接下来，确保您没有在代码的其他地方保存对任何要删除的DOM节点的引用.堆快照应显示到gc根的路径。找到可以断开的边。

loadSingleSolutionRow: function(dow, dateValue, click, columnId) {
    var self = this;
    if (click === true) {
        $('.sxpTableCol[data-colid="' + dow + '"]').empty();
    }

    //do stuff

    var columnName = click === true ? '.sxpTableCol[data-colid="' + dow + '"]' : '#solCol' + columnId;

    if (click === true) {
        $(columnName).replaceWith(self.solutionTableRow({
            dayId: dow,
            date: selectedDate,
            dateValue: dateValue,
            statusClass: statusClass,
            statusIconClass: statusIconClass,
            trainerCountEarly: trainerCountEarly,
            trainerListEarly: trainerListEarly,
            roomCountEarly: roomCountEarly,
            roomListEarly: rooomListEarly,
            trainerCountLate: trainerCountLate,
            trainerListLate: trainerListLate,
            roomCountLate: roomCountLate,
            roomListLate: rooomListLate,
            protip: protip,
            statusText: statusText,
        }));
    } else {
        $(columnName).append(self.solutionTableRow({
            dayId: dow,
            date: selectedDate,
            dateValue: dateValue,
            statusClass: statusClass,
            statusIconClass: statusIconClass,
            trainerCountEarly: trainerCountEarly,
            trainerListEarly: trainerListEarly,
            roomCountEarly: roomCountEarly,
            roomListEarly: rooomListEarly,
            trainerCountLate: trainerCountLate,
            trainerListLate: trainerListLate,
            roomCountLate: roomCountLate,
            roomListLate: rooomListLate,
            protip: protip,
            statusText: statusText,
        }));
    }
    //Event listener for clicking on day
    $('.sxpTableCol').off().on('click', '.sxpTableHeader', function (e) {
        //populateInfoPanel
    });
}

for (var j = 0; j < duration; j++) {
    var dayCount = j + 1;
    if (dayId !== undefined && daySolutions.Days[dayId].Solution !== undefined) {
        //Getting day of solution in calendar grid
        var daySolution = daySolutions.Days[dayId].Solution[j];
        var solutionDayIndex = daySolution.DayIndex;
        var solutionWeekIndex = daySolution.WeekNum;
        var startWeek = moment(self.dto.startDate, 'YYYY-MM-DDTHH:mm').diff(moment(this.settings.findWhere({
            Key: 'StartDate'
        }).get('Value'), 'YYYY-MM-DD').startOf('isoWeek'), 'weeks') + 1;
        var weekIndex = solutionWeekIndex - startWeek;
        //var day = parseInt(dayId) + j;
        var day = solutionDayIndex + (weekIndex * self.numDays);


        //DO STUFF -- GETTING ROOM & TRAINER INFORMATION TO APPEND TO DOM

        //DO STUFF -- GETTING POSITION OF ELEMENT ON THAT DAY

        //DO STUFF -- GETTING LABELS THAT GO ONTO HEADER OF DAY

        //APPEND DAY DETAILS TO CALENDAR
        $(shiftData + day + '"]').append(self.selectedItemTpl({
            dayCourse: dayCourse,
            trainerList: trainerLabel,
            roomList: roomLabel,
            dayId: dayInfoId,
            solutionId: j,
            shiftId: shiftIndex,
            day: day,
            trainerIconClass: trainerIconClass,
            roomIconClass: roomIconClass,
        }));
    }
}