Descarga de recursos en HTML con JavaScript

Question

Estoy trabajando en un juego de HTML 5, ya está en línea, pero actualmente es pequeño y todo está bien.

La cosa es, a medida que crece, va a cargar muchas, muchas imágenes, música, efectos de sonido y más. Después de 15 minutos de juego, al menos 100 recursos diferentes ya se pudieron haber cargado. Como es una aplicación HTML5, nunca refresca la página durante el juego, por lo que se acumulan en segundo plano.

Me he dado cuenta de que cada recurso que cargué, al menos en WebKit, usando Web Inspector, permanece allí una vez que elimino el <img>, <link> en el CSS y demás. Supongo que todavía está en la memoria, simplemente no se usa, ¿verdad?

Esto acabaría consumiendo mucha RAM eventualmente, y conduciría a una degradación en el rendimiento especialmente en los móviles iOS y Android (que ya noté ligeramente en la versión actual), cuyos recursos son más limitados que las computadoras de escritorio.

Mi pregunta es: ¿Es posible descargar por completo un recurso, liberando espacio en la memoria RAM, a través de JavaScript? Sin tener que actualizar toda la página para "limpiarla".

Peor escenario: ¿Usaría marcos ayuda, al eliminar un marco, para liberar esos marcos de recursos ?.

¡Gracias!

Answer 1

Su descripción implica que ha eliminado por completo todas las referencias a los recursos. El comportamiento que está viendo, entonces, es simplemente el recolector de basura que no se ha invocado para limpiar el espacio, que es común en las implementaciones de javascript hasta que sea "necesario". Establecer en null o llamando al delete generalmente no lo hará mejor.

Como un caso común, normalmente puede llamar al CollectGarbage() durante cargas/descargas de escenas para forzar el proceso de recopilación. Esta suele ser la mejor solución cuando los datos se cargarán para "etapas" del juego, ya que es un tiempo que no es crítico en el tiempo. Por lo general, no deseas que el coleccionista invoque durante el juego a menos que no sea un juego en tiempo real.

Los marcos suelen ser una solución difícil si desea mantener ciertos recursos para controles de juego comunes. Debe considerar si está actualizando recursos completos o solo ciertos recursos.

Answer 2

Dijiste peor escenario: ayudaría utilizando marcos, mediante la supresión de un marco, para liberar recursos de esos marcos

Es bueno utilizar marco. Sí, puede liberar recursos eliminando los marcos.

Answer 3

Todo lo que puede hacer es confiar en el mecanismo de recolección de basura integrado de JavaScript.

Esto entra en juego siempre que no haya ninguna referencia a su imagen.

Así que suponiendo que tiene un indicador de referencia para cada imagen, si se utiliza:

img.destroy() 

o

img.parentNode.removeChild(img) 

Merece la pena echar un vistazo a: http://www.ibm.com/developerworks/web/library/wa-memleak/

también: Need help using this function to destroy an item on canvas using javascript

EDITAR

Aquí hay un código que le permite cargar una imagen en una var.

<script language = "JavaScript"> 


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

...... 

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

</script> 

Esto es mejor que el uso de jQuery .load() becuase que le da más control sobre referencias de imagen, y se elimina de la memoria si la referencia se ha ido (null)

Tomado de: http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

Espero que ayude!

Answer 4

Muy bien, así que hice mis pruebas cargando 3 HTML diferentes en una etiqueta de artículo <>. Cada HTML tenía muchas, enormes imágenes. Unas 15 imágenes enormes por "página".

Así que utilicé la función jQuery.load() para insertar cada una en la etiqueta. También tenía un código HTML adicional que solo tenía un < h1>, para ver qué sucedía cuando una página sin imágenes reemplazaba a la página anterior.

Bueno, resulta que la memoria RAM va más grande cuando comienzas a desplazarte, y dispara cuando pasas por una imagen particularmente grande (grande en dimensiones y tamaño, no solo en tamaño). Pero una vez que lo dejas atrás y las imágenes más claras llegan a la pantalla, el consumo de RAM realmente baja. Y cada vez que reemplazaba usando JS el contenido de la página, el consumo de RAM disminuía mucho cuando ocupaba demasiado. La memoria virtual se mantuvo siempre alta y raramente descendió.

Supongo que el navegador es bastante inteligente sobre el manejo de recursos. No parece descargarlos si lo dejas ahí por un largo tiempo, pero tan pronto como empiezas a cargar otras páginas o al desplazamiento, comienza a cargar/liberar.

supongo que no tengo nada de qué preocuparse después de todo ...

Gracias a todos! =)

Answer 5

Hay 2 formas mejores para cargar las imágenes, además de un <img> etiqueta normal, lo que Google brillantemente discute aquí:

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

1. Cargando las imágenes a través de una HTML5 <canvas> que se forma en forma Más rápido. Realmente vería ese video e implementaría estos métodos para obtener más velocidad. Me imagino que la recolección de basura con lienzo funcionaría mejor porque se está separando del DOM.

2. Urls de datos incrustados, donde el atributo src de una etiqueta de imagen son los datos binarios reales de la imagen (sí, es una cadena gigante). Comienza así: src="data:image/jpeg;base64,/9j/MASSIVE-STRING ... " Después de usar esto, por supuesto querrá usar un método para eliminar este nodo como se discutió en las otras respuestas. (No sé cómo generar esta cadena de base64, pruebe Google o el video)