w3schools img change attribute javascript optimization memory-leaks garbage-collection requestanimationframe

javascript - img - solicitudAnimationFrame recolección de basura



title html (3)

Creo que Chrome puede tener un problema allí ...

error similar ya se informó aquí:

https://code.google.com/p/chromium/issues/detail?id=120186

Estoy perfilando el uso de memoria del siguiente código usando la línea de tiempo en Chrome Dev Tools v27.

<!DOCTYPE html> <html> <head> <meta http-equiv=''content-type'' content=''text/html; charset=UTF-8'' /> <title>RAF</title> </head> <body> <script type=''text/javascript'' charset=''utf-8''> var frame = function() { window.webkitRequestAnimationFrame(frame); }; window.webkitRequestAnimationFrame(frame); </script> </body> </html>

Fíjate que es simple. Pero eventualmente veo que aparece un patrón de dientes que indica que el recolector de basura está recuperando memoria.

¿Raf crea objetos basura por defecto? Hay alguna manera de evitar esto? Gracias.


Parece un ciclo de retención. Frame se está llamando a sí mismo, por lo que tiene un conteo de retención y no se libera. Además, cada vez que esté monitoreando un código en ejecución con perfil, línea de tiempo o montones de pila, habrá algunos efectos secundarios.

De cualquier manera, no me preocuparía. Hay problemas mucho más grandes que abordar si intenta que su aplicación o página funcione. Siempre que JS complete en menos de 16ms, nadie notará nada.

Los mayores problemas de memoria / CPU son: llamadas a la red, descompresión de PNG / JPG, creación y destrucción de elementos DOM, procesamiento / análisis de datos en un hilo que no sea de trabajo, uso deficiente de las texturas GPU y asignación de gran cantidad de datos para que el GC tome una mucho tiempo para recopilar datos.

Pude optimizar una lista de desplazamiento con 1,000,000 de elementos para ejecutar a 120FPS en Chrome ( https://github.com/puppybits/BackboneJS-PerfView ). Las herramientas de rendimiento deberían ayudarlo a encontrar los problemas más importantes que el usuario puede ver y no necesita preocuparse por las cosas menores.


Descubrí lo siguiente: si cambia su función RAF a dos funciones tipo "ping-pong", obtendrá mucha menos basura. No se puede evitar el primer "GC grande" inicial, pero después de eso solo se ven GC menores de unos 50kb en lugar de 700kb-1mb GC. El código se verá así:

<script type=''text/javascript'' charset=''utf-8''> window.frameA = function() { window.webkitRequestAnimationFrame(window.frameB); }; window.frameB = function() { window.webkitRequestAnimationFrame(window.frameA); }; window.webkitRequestAnimationFrame(window.frameA); </script>

Supongo que esto es lo mejor que puedes hacer en Chrome. Me di cuenta de que en FF los intervalos de gc o la memoria apenas cambian, por lo que probablemente esté relacionado con las tareas de depuración de Chrome (para obtener más información, consulte el informe de errores de Chrome relacionado más arriba). Sin embargo, noté una mejora en mi propio juego al desplegar RAF como este - y diablos, necesito poder depurarlo sin GC artificiales que no sucederán en las máquinas de usuarios normales.