Распоряжаться объектом изображения

При создании нового элемента Image в javascript инструмент памяти Google Chrome (Инструменты разработчика> Timeline & gt; Memory), естественно, рассматривает его как новый элемент DOM.

В моем случае у меня более 1500 элементов DOM, и я хочу от них избавиться. Я попытался сохранить все объекты в массиве и удалить их все в цикле, когда я готов создать все объекты, что привело к следующей ошибке:

Uncaught TypeError: Cannot call method 'removeChild' of null

Это указывает на то, что объекты Image не отображаются в реальном DOM.

var images = [];
var i, image;

for( i = 0; i < urls.length; i++ ) {
    image = new Image();
    image.src = urls[i];
}

// other stuff happens

for( i = 0; i < images.length; i++ ) {
    // apparently this doesn't work because I'm not adding the image to my DOM
    // images[i].parentNode.removeChild( images[i] );

    // delete images
}

Is there a way to remove/delete/unset/dispose the Image objects?

Ответы на вопрос(5)

appendChild родителю), тоremoveChild бесполезно. Объекты изображения находятся только в памяти.

А чтобы расположить элементы в памяти, вам нужно всего лишь удалить ссылки на эти объекты (например, установить переменную ссылки на null), а сборщик мусора сделает все остальное. Если вы не можете обнулить их все, они не будут GC-ред.

 19 нояб. 2016 г., 10:25
Просто любопытно, что если вы обнулите объект, технически все равно удалит память, выделенную изimage после того, как GC 'd?
 03 авг. 2016 г., 14:10
Лучший ответ IMO
Решение Вопроса

images = null удалил бы вашу ссылку в коде на объект. Однако для его реализацииload В этом случае Chrome должен иметь собственную внутреннюю ссылку на объект.

То есть вы могли бы иметь такой код:

for( i = 0; i < urls.length; i++ ) { 
    image = new Image(); 
    image.src = urls[i]; 
    image.onload = function(){alert('Test');};
    image = null;
} 

Таким образом, вы все равно получите много «Test» оповещения, даже если у вас нет ссылки на эти объекты.

Следовательно, мойguess в том, что это ошибка в Chrome, а не в вашем коде.

Обновление: просмотр источника Chromium как бы доказывает это (я имею в виду комментарий к строкам 67-71 этого файла, особенно примечание FIXMEhttp://code.google.com/searchframe#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/bindings/v8/custom/V8HTMLImageElementConstructor.cpp ):

// Make sure the document is added to the DOM Node map. Otherwise, the HTMLImageElement instance
// may end up being the only node in the map and get garbage-ccollected prematurely.
// FIXME: The correct way to do this would be to make HTMLImageElement derive from
// ActiveDOMObject and use its interface to keep its wrapper alive. Then we would
// remove this code and the special case in isObservableThroughDOM.
 Tim S.14 июн. 2012 г., 14:35
Спасибо! Я знаю, что ваш ответ был последним, но вы действительно провели некоторое исследование
 22 мар. 2018 г., 09:39
Это не ошибка! Вы добавили слушателя, но не удалили его. Делая & quot; image = null & quot; Вы только удаляете эту конкретную ссылку. Объект все еще существует в памяти, хотя ссылки на него не оставлены. Чтобы освободить GS, вы должны удалить событие с помощью & quot; image.onload = null & quot;
 02 апр. 2015 г., 12:45
Это было исправлено с тех пор или это все еще ошибка?

null следует очистить это:images[i] = null

for( i = 0; i < images.length; i++ ) 
  images[i] = null;
}

// or just 
images = null;

описанной «наивистами» Хром и Specilly IE и EDGE. Вы можете изменить источник изображения на пустой, чтобы он занимал нулевую память.

image.src = '';
image = null;

Ваш ответ на вопрос