D3.js следует ли отключать прослушиватель событий при выходе/удалении?

У меня есть код, который добавляет обработчик события mouseover в круги SVG для отображения всплывающих подсказок. Должен ли я удалить/развязать эти обработчики при удалении элементов окружности? Я не знаю, прикреплены ли эти обработчики к объекту svg, и я боюсь, что это может привести к теневому дому или утечкам памяти. См. Следующий код:

circles.enter().append("svg:circle")
   .on("mouseenter", function(d) {
      // show tooltip
   });
circles.exit()
   .on("mouseenter", null) // necessary?
   .remove();

Ответы

Ответ 1

Я думаю, что у вас уже есть свой ответ, но мне было интересно, как вы покажете, что это правда, по крайней мере, в последнем Chrome.

Это раздел кода D3, который удаляет узлы DOM:

function remove() {
  var parent = this.parentNode;
  if (parent) parent.removeChild(this);
}

export default function() {
  return this.each(remove);
}

Так что, как вы можете видеть, в зависимости от браузера можно выполнить очистку любых связанных слушателей.

Я создал простой стресс-тест добавления/удаления большого количества круговых узлов с помощью D3:

  var circles = svg.selectAll("circle")
    .data(data, function(d) { return d.id; } );

  circles.exit().remove();

  circles.enter().append("circle")
    .attr("id", function(d) { return d.id; })
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr( { r: 5, fill: 'blue' })
    .on("mouseenter", function(d) { console.log('mouse enter') });

Живая версия здесь: http://bl.ocks.org/explunit/6413685

  1. Откройте выше с последним Chrome
  2. Откройте Инструменты разработчика
  3. Нажмите вкладку Временная шкала
  4. Нажмите кнопку записи внизу
  5. Дайте ему поработать пару минут, затем снова нажмите кнопку, чтобы остановить запись.
  6. Перетащите селектор на верхнюю временную шкалу, чтобы покрыть несколько пилообразных шаблонов для сборки мусора.

Вы заметите, что счетчики сборки мусора узла DOM соответствуют счетчикам сбора мусора прослушивателя событий. На самом деле, вы не можете различить их на скриншоте ниже, так как линии наложены:

Chrome Screenshot

Обратите внимание, что для Internet Explorer все немного сложнее.

См. Также эту статью для получения дополнительных советов по отслеживанию использования памяти в инструментах Chrome.