Выгрузка ресурсов на HTML с помощью JavaScript

Я работаю над игрой HTML 5, она уже в сети, но в настоящее время она маленькая, и все в порядке.

Вещь, по мере ее роста, будет загружать много, много изображений, музыку, звуковые эффекты и многое другое. По прошествии 15 минут игры, возможно, уже было загружено как минимум 100 различных ресурсов. Поскольку это приложение HTML5, оно никогда не обновляет страницу во время игры, поэтому все они складываются в фоновом режиме.

Я заметил, что каждый ресурс, который я загружаю - на WebKit, по крайней мере, с помощью Web Inspector - остается там, когда я удаляю <img>, <link> в CSS и еще. Я предполагаю, что это все еще в памяти, просто не используется, правильно?

В конечном итоге это приведет к большому количеству оперативной памяти и приведет к снижению производительности, особенно на мобильных устройствах iOS и Android (которые я уже немного замечу в текущей версии), ресурсы которых более ограничены, чем настольные компьютеры.

Мой вопрос: Можно ли полностью выгрузить ресурс, освободив место в ОЗУ, через JavaScript? Без необходимости обновлять всю страницу, чтобы "очистить".

Худший сценарий: использовал ли фреймы, удалив фрейм, освободить ресурсы этих кадров?

Спасибо!

ОТВЕТЫ

Ответ 1

Ваше описание подразумевает, что вы полностью удалили все ссылки на ресурсы. Таким образом, поведение, которое вы видите, - это просто сборщик мусора, который не был вызван для очистки пространства, что является обычным в реализациях javascript до "необходимого". Настройка на null или вызов delete обычно не лучше.

Как обычный случай, обычно вы можете вызвать CollectGarbage() во время загрузки/выгрузки сцены, чтобы заставить процесс сбора. Это, как правило, лучшее решение, когда данные будут загружены для игровых "этапов", поскольку это время, которое не критично. Обычно вы не хотите, чтобы коллекционер вызывал во время игры, если это не очень игра в реальном времени.

Кадры обычно сложнее, если вы хотите сохранить определенные ресурсы для обычных игровых элементов управления. Вам нужно рассмотреть, обновляете ли вы целые ресурсы или только определенные ресурсы.

Ответ 2

Все, что вы можете сделать, это полагаться на JavaScript, встроенный в механизм сбора мусора.

Это срабатывает всякий раз, когда нет ссылки на ваше изображение.

Предположим, что у вас есть указатель ссылки для каждого изображения, если вы используете:

img.destroy()

или

img.parentNode.removeChild(img)

Стоит проверить: http://www.ibm.com/developerworks/web/library/wa-memleak/

Также: Нужна помощь с помощью этой функции для уничтожения элемента на холсте с помощью javascript

ИЗМЕНИТЬ

Вот некоторый код, который позволяет загружать изображение в var.

<script language = "JavaScript">


var heavyImage = new Image(); 
heavyImage.src = "heavyimagefile.jpg";

......

heavyImage = null; // removes reference and frees up memory

</script>

Это лучше, если использовать JQuery.load(), потому что он дает вам больше контроля над ссылками на изображения, и они будут удалены из памяти, если ссылка исчезла (null)

Взято из: http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

Надеюсь, что это поможет!

Ответ 3

Есть 2 лучших способа загрузки изображений, кроме обычного тега <img>, который Google блестяще обсуждает здесь:

http://www.youtube.com/watch?v=7pCh62wr6m0&list=UU_x5XG1OV2P6uZZ5FSM9Ttw&index=74

  • Загрузка изображений через HTML5 <canvas>, что намного быстрее. Я бы действительно смотрел это видео и реализовал эти методы для большей скорости. Я бы предположил, что сбор мусора с холстом будет функционировать лучше, потому что он отрывается от DOM.

  • Введенные URL-адреса данных, где атрибут src тега изображения является фактическими двоичными данными изображения (да, это гигантская строка). Он начинается следующим образом: src="data:image/jpeg;base64,/9j/MASSIVE-STRING ... " После использования этого вы, конечно, захотите использовать метод для удаления этого node, как описано в других ответах. (Я не знаю, как сгенерировать эту строку base64, попробуйте Google или видео)

Ответ 4

Вы сказали Худший сценарий: использовал бы фреймы, удалив фрейм, освободить ресурсы этих кадров

Хорошо использовать фрейм. Да, он может освободить ресурс, удалив фреймы.

Ответ 5

Хорошо, поэтому я сделал свои тесты, загрузив 3 разных HTML в <article> . У каждого HTML было много огромных образов. Примерно 15 огромных изображений на "страницу".

Итак, я использовал функцию jQuery.load() для вставки каждого из тега. Также был добавлен дополнительный HTML, который имел только < h1 > , чтобы узнать, что произошло, когда страница без изображений заменила предыдущую страницу.

Ну, получается, что RAM становится больше, пока вы начинаете прокрутку, и стреляет вверх, когда просматриваете особенно большое изображение (большое, как в размерах и размере, а не только в размере). Но как только вы покидаете это, и светлые изображения приходят на экран, потребление ОЗУ фактически снижается. И всякий раз, когда я заменял использование JS на содержании страницы, потребление ОЗУ по-настоящему снижалось, когда оно занимало много места. Виртуальная память оставалась всегда высокой и редко опускалась.

Итак, я полагаю, что браузер достаточно разбирается в обработке ресурсов. Кажется, он не выгружает их, если вы оставите их там надолго, но как только вы начнете загружать другие страницы или прокручивать, он начинает загружаться/освобождаться.

Думаю, мне не о чем беспокоиться, ведь...

Спасибо всем! =)