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

Question

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

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

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

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

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

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

Спасибо!

Answer 1

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

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

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

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

Answer 2

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

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

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

img.destroy()

или

img.parentNode.removeChild(img)

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

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

EDIT

Вот код, который позволяет вам загружать изображение в 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

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

Хорошо, я сделал свои тесты, загрузив 3 разных HTML-кода в тег

. В каждом HTML было много огромных изображений. Примерно около 15 огромных изображений на «страницу».

Поэтому я использовал функцию jQuery.load () для вставки каждого в тег. Также был дополнительный HTML-код, в котором был только

, чтобы увидеть, что произошло, когда страница без изображений заменяла предыдущую страницу. Что ж, получается, что объем ОЗУ увеличивается, когда вы начинаете прокручивать, и снимается при просмотре особенно большого изображения (большого как по размерам и размеру, а не только по размеру). Но как только вы оставите это позади, и более светлые изображения появятся на экране, потребление ОЗУ фактически уменьшится. И всякий раз, когда я заменял с помощью JS содержимое страницы, потребление оперативной памяти сильно уменьшалось, когда оно занимало много времени. Виртуальная память всегда оставалась высокой и редко падала. Так что я думаю, что браузер достаточно умён в управлении ресурсами. Похоже, он не выгружается, если вы оставляете его там надолго, но как только вы начинаете загружать другие страницы или прокручивать, он начинает загружаться / освобождаться. Полагаю, мне не о чем беспокоиться ... Спасибо всем! =)