Может ли кто-нибудь объяснить, почему этот JavaScript вызывает утечку памяти в IE7?

Код довольно длинный, но простой:

Создано 100 дырявых объектов JavaScript.
Из объектов JS создаются 10 дырявых элементов.
1 элемент удален и 1 добавлен 10000 раз.

Я предполагаю, что вызов detachEvent не работает должным образом. Кроме того, если вы измените this.eventParams с массива на простую переменную, утечка исчезнет. Почему?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
    <title>Memory Leak With Fix</title>
    <style type = "text/css">
      .leakyEle 
      {
        border: solid 1px red;
        background-color: Gray;
      }
    </style>
    <script type = "text/javascript">

/******************************* MAIN ********************************/
var leakObjArray = new Array();
AddEvent(window, 'load', Startup, false);

function Startup() {           
  for(var i=0; i<100; i++) {
    leakObjArray.push(new LeakyObj(i));
  }

  for(var j=0; j<10; j++) {
    leakObjArray[j].CreateLeakyEle();
  }     
  var container = document.getElementById('Container');
  AddEvent(container, 'click', Run, false);
  alert('Close this dialog and click the document to continue.');
}

function Run() {
  var k = 0;
  var l = 10;

  for(var m = 0; m<10000; m++) {
    leakObjArray[k].DestroyLeakyEle();
    leakObjArray[l].CreateLeakyEle();
    if (k<leakObjArray.length - 1) {
      k++;
    } else {
      k = 0;
    }
    if (l<leakObjArray.length - 1) {
      l++;
    } else {
      l = 0;
    }
  }   
  for(var i=0; i<leakObjArray.length; i++) {
    leakObjArray[i].DestroyLeakyEle();
  }
  alert('Test Complete.');
}

/******************************* END MAIN ********************************/

/******************************* LEAKY OBJECT ********************************/
function LeakyObj(id) {
  this.id = id;
  this.leakyEle = null;
  this.containerEle = document.getElementById('Container');
  this.clicked = false;
  this.eventParams = new Array();
}

LeakyObj.prototype.CreateLeakyEle = function() {
  var leakyEle = document.createElement('div');
  leakyEle.id = 'leakyEle' + this.id;  
  leakyEle.className = 'leakyEle';           
  leakyEle.innerHTML = this.id + ' --- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' +
    '<br/>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' +
    '<br/>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' +
    '<br/>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' +
    '<br/>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';

  this.leakyEle = leakyEle;

  var _self = this;
  this.eventParams.push(AddEventWithReturnParams(this.leakyEle, 'click', function() { _self.EventHandler(); }, false));

  this.containerEle.appendChild(leakyEle);
}

LeakyObj.prototype.DestroyLeakyEle = function() {
  if (this.leakyEle != null) {
    this.containerEle.removeChild(this.leakyEle);
    for(var i=0; i<this.eventParams.length; i++) {      
      RemoveEventOverload(this.eventParams[i]);
    }
    this.leakyEle = null;
  }
}

LeakyObj.prototype.EventHandler = function() {
  this.leakyEle.style.display = 'none';
  this.clicked = true;
}

/******************************* END LEAKY OBJECT ********************************/

/******************************* GENERAL FUNCS ********************************/

function AddEvent(elm, evType, fn, useCapture){
  var success = false;
  if (elm.addEventListener) {
    if (evType == 'mousewheel') evType = 'DOMMouseScroll';
    elm.addEventListener(evType, fn, useCapture);    
    success = true;
  } else if (elm.attachEvent) {
    if (evType == 'mousewheel') {
      window.onmousewheel = document.onmousewheel = fn;
      success = true;
    } else {
      var r = elm.attachEvent('on' + evType, fn);
      success = r;
    }
  } else {
    success = false;
  }
  elm = null;
  return success;
}

function AddEventWithReturnParams(elm, evType, fn, useCapture) {
  var eventParams = new EventParams(elm, evType, fn, useCapture);
  AddEvent(elm, evType, fn, useCapture);
  return eventParams;
}

function RemoveEvent(elm, evType, fn, useCapture) {
  if (elm) {  
  if (elm.removeEventListener) {
    elm.removeEventListener(evType, fn, useCapture);    
    return true;
  } else if (elm.detachEvent) {  
    var r = elm.detachEvent('on' + evType, fn);    
    return r;
  } else {
    debugger;
  }  
  }
}

function RemoveEventOverload(eventParams) {
  if (eventParams) {
    return RemoveEvent(eventParams.element, eventParams.eventType, eventParams.handler, eventParams.capture);
  }
}

function EventParams(elm, evType, fn, useCapture) {
  return {
    element: elm,
    eventType: evType,
    handler: fn,
    capture: useCapture
  }
}
/******************************* END GENERAL FUNCS ********************************/
    </script>
</head>
<body>
<div id = "Container"></div>
</body>
</html>

javascript internet-explorer javascript-events memory-leaks

06.11.2008 22:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

912

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

похоже, вы помещаете что-то в массив событий Params внутри CreateLeakyEle, но не получаете его? Это правильно?

06.11.2008 23:14

Если вы посмотрите на свой код, вы должны заметить, что в каждом объекте eventParams, хранящемся в вашем массиве eventParams, у вас есть ссылки на объекты, но вы никогда не очищаете свой массив. Попробуйте очистить свой массив ...

06.11.2008 23:15

Другие вопросы по теме

Мой блог некорректно отображается в Internet Explorer

Пустая страница в IE6

Что такое ошибка «Операция прервана» в Internet Explorer?

Передача учетных данных для аутентификации AD через браузер IE в C# Windows Form

Отправка формы Javascript: объект не поддерживает это свойство или метод (IE7)

Почему ASP.NET вызывает ошибку «Операция прервана» в IE7?

Разветвите или скопируйте сеанс браузера пользователя в IE

Странное поведение при открытии всплывающего окна в Internet Explorer

Как динамически обновить окно выбора HTML в IE

Кнопка возврата в браузере восстанавливает пустые поля

Может ли кто-нибудь объяснить, почему этот JavaScript вызывает утечку памяти в IE7?

Ответы 2

Другие вопросы по теме

Похожие вопросы