У меня есть веб-приложение, которое динамически загружает данные в течение длительного периода времени. Внутри данных есть ссылки на изображения, которые затем отображаются в браузере.
например.
var object = {
Name: ko.observable("Foo"),
Ref: ko.observable("Bar"),
ImageUrl: ko.observable("http://.....")
}
Я использую Knockoutjs привязку шаблона для отображения данных на экране.
<img data-bind="attr: { src: imageUrl }" />
Таким образом, каждый раз, когда объект изменяется с помощью вызова Ajax, шаблон Knockoutjs повторно отображается с данными, а изображения меняются.
После длительного периода времени эти изображения накапливаются и будут потреблять больше памяти. Современные браузеры, похоже, справляются лучше, но проблема в основном связана с IE8 (мы не поддерживаем < IE8). Даже в современных браузерах память в конечном итоге будет настолько высока, что браузер зависнет.
См. этот снимок экрана для примера создания ресурсов изображения.
Я решил посмотреть, что произойдет, если вместо использования тега <img />
используйте <iframe />
.
Итак, мой код теперь выглядит как
<iframe data-bind="attr: { src: imageUrl }"></iframe>
Что происходит, так это то, что создается кадр, но как только изменяется значение imageUrl, кадр просто обновляется и не создает дополнительных ресурсов.
Итак, если я хочу использовать использование памяти браузера, я могу использовать эту технику <iframe />
, но мне это не нравится. Это заставляет меня делать много других изменений в приложении, плюс мне нужно использовать iframes!
Теперь я проверил различные тесты, чтобы узнать, сколько памяти используется с использованием обоих методов, и за тот же период времени память увеличится с 81 000 до 200 000 к (с <img />
) по сравнению с 81 000 к 98 000 k (с <iframe />
)
Вопрос
Есть ли лучший способ управления ресурсами изображения в браузере? Есть ли способ правильно избавиться от этого изображения? Я искал в Интернете ответ, но до сих пор я ничего не нашел.
Edit
На самом базовом уровне. Я попытался удалить изображение с помощью метода jQuery remove()
, но ресурс изображения никогда не удаляется. См. Эту скрипку для очень простого примера. http://jsfiddle.net/ezb9e/
код:
HTML
<img src="http://www.fillmurray.com/200/300" />
JS
$(function(){
setTimeout(function(){
$('img').remove();
$('body').append($('<img />', { attr: { src: 'http://www.fillmurray.com/300/200' }}));
}, 3000);
});