Solucionar problemas de memoria

Para encontrar problemas de memoria que afectan al rendimiento de la página, como fugas de memoria, hinchazón de memoria y recolecciones frecuentes de elementos no utilizados, use las siguientes herramientas:

• Administrador de tareas del explorador Microsoft Edge.
• La casilla Memoria de la herramienta Rendimiento.
• Los distintos tipos de generación de perfiles de la herramienta Memoria .

Herramientas para investigar el uso de la memoria

Caso de uso	Herramienta	Artículo
Supervisa la cantidad de memoria que usa una página web, en tiempo real.	Administrador de tareas del explorador Microsoft Edge	Supervisar el uso de memoria en tiempo real (Administrador de tareas del explorador)
Visualizar el uso de memoria de una página web durante un período de tiempo.	Herramienta> Rendimiento Casilla de verificación de memoria	Visualice las fugas de memoria (herramienta Rendimiento: casilla Memoria) en Referencia de características de rendimiento.
Detecte las recolecciones frecuentes de basura.	Navegador Microsoft Edge, administrador de tareas o herramienta> Rendimiento Casilla de memoria	Detecte recolecciones frecuentes de elementos no utilizados (Administrador de tareas del explorador Microsoft Edge, casilla Memoria de la herramienta Rendimiento) a continuación.
Inspeccionar el contenido de la memoria usada por una página web.	Herramienta>Memoria Instantánea de montón	Grabar instantáneas de montón con la herramienta Memoria (tipo de generación de perfiles "instantánea de montón")
Averigüe qué objetos de JavaScript se crean durante un período de tiempo para aislar las pérdidas de memoria.	Herramienta> Memoria Asignaciones en la línea de tiempo	Usar instrumentación de asignación en la escala de tiempo (tipo de generación de perfiles "Asignaciones en la escala de tiempo")
Averigüe qué funciones de JavaScript asignan memoria durante un período de tiempo. Este tipo de perfil tiene una sobrecarga de rendimiento mínima y se puede usar para operaciones de larga duración.	Herramienta>Memoria Muestreo de asignación	Acelerar el tiempo de ejecución de JavaScript (tipo de generación de perfiles "Muestreo de asignación")
Buscar fugas de memoria del árbol DOM.	Herramienta> Memoria Elementos desasociados	Depurar pérdidas de memoria DOM (tipo de generación de perfiles "elementos desasociados")

La herramienta Memoria

La herramienta principal para investigar los problemas de memoria es la herramienta Memoria :

Perfil Elementos desasociados en la herramienta Memoria :

Para volver a la lista de botones de opción para los tipos de perfiles, en la parte superior izquierda de la herramienta Memoria , haga clic en Perfiles ().

Información general sobre cómo solucionar problemas de memoria

En el espíritu del modelo de rendimiento RAIL , el enfoque de sus esfuerzos de rendimiento debe ser sus usuarios.

Los problemas de memoria son importantes porque a menudo son perceptibles por los usuarios. Los usuarios pueden percibir los problemas de memoria de las siguientes maneras:

• El rendimiento de una página empeora progresivamente con el tiempo. Esto es posiblemente un síntoma de una pérdida de memoria. La pérdida de memoria se produce cuando un error en la página hace que la página use progresivamente más y más memoria a lo largo del tiempo.

• El rendimiento de una página es sistemáticamente malo. Esto es posiblemente un síntoma de hinchazón de la memoria. El aumento de la memoria se produce cuando una página usa más memoria de la necesaria para una velocidad óptima de la página.

• El rendimiento de una página se retrasa o parece detenerse con frecuencia. Esto es posiblemente un síntoma de la recolección frecuente de basura. La recolección de elementos no utilizados es cuando el explorador reclama memoria. El explorador decide cuándo ocurre esto. Durante las recopilaciones, se pausa toda la ejecución de scripts. Entonces, si el navegador está recolectando mucha basura, el tiempo de ejecución del script se pausará mucho.

Hinchazón de la memoria: ¿Cuánto es "demasiado"?

Una pérdida de memoria es fácil de definir. Si un sitio está utilizando progresivamente más y más memoria, entonces tiene una fuga. Pero la hinchazón de la memoria es un poco más difícil de precisar. ¿Qué se califica como "usar demasiada memoria"?

No hay números concretos aquí, porque los diferentes dispositivos y exploradores tienen diferentes capacidades. La misma página que funciona sin problemas en un teléfono inteligente de gama alta puede bloquearse en un teléfono inteligente de gama baja.

La clave aquí es usar el modelo RAIL y centrarse en sus usuarios. Averigüe qué dispositivos son populares entre los usuarios y, a continuación, pruebe la página en esos dispositivos. Si la experiencia es sistemáticamente mala, es posible que la página esté superando las capacidades de memoria de esos dispositivos.

Detecte recolecciones frecuentes de elementos no utilizados (Administrador de tareas del explorador Microsoft Edge, casilla Memoria de la herramienta Rendimiento)

Si la página parece pausarse con frecuencia, es posible que tengas problemas de recolección de elementos no utilizados. Para detectar la recolección frecuente de elementos no utilizados, puede usar:

• Administrador de tareas del explorador Microsoft Edge. Sube y baja con frecuencia Memoria o JavaScript Los valores de memoria representan una recolección frecuente de elementos no utilizados. Consulte Supervisar el uso de memoria en tiempo real (Administrador de tareas del explorador).

• La casilla Memoria de la herramienta Rendimiento. En las grabaciones de memoria de rendimiento, los cambios frecuentes (ascendentes y descendentes) en los gráficos de recuento de nodos o montón de JS indican una recolección frecuente de elementos no utilizados. Consulte Ver métricas de memoria en Referencia de características de rendimiento.

Después de identificar el problema mediante cualquiera de esas herramientas, puede usar las asignaciones en el tipo de generación de perfiles de escala de tiempo de la herramienta Memoria para averiguar dónde se asigna la memoria y qué funciones provocan las asignaciones. Consulte Uso de instrumentación de asignación en la escala de tiempo (tipo de generación de perfiles "Asignaciones en la escala de tiempo")).

Buscar fugas de memoria de árbol DOM de elementos desasociados

Un nodo DOM solo es recolectado por el navegador cuando no hay referencias al nodo del árbol DOM o del código JavaScript que se ejecuta en la página. Se dice que un nodo está "desasociado" cuando se quita del árbol DOM, pero algunos JavaScript todavía hacen referencia a él. Los nodos DOM desconectados son una causa común de pérdidas de memoria.

Herramientas para investigar elementos desasociados

Caso de uso	Herramienta	Artículo
Mostrar solo los elementos desasociados como nodos de árbol DOM.	Herramienta Memoria> Tipo de generación de perfiles de elementos desasociados	Depurar pérdidas de memoria DOM (tipo de generación de perfiles "elementos desasociados")
Mostrar todos los objetos de la memoria, filtrados para mostrar elementos desasociados, con vínculos al código fuente de JavaScript.	Herramienta> Memoria Tipo > de generación de perfiles de instantánea de montónDesasociado	Buscar fugas de memoria de árbol DOM (tipo > de generación de perfiles "Instantánea del montón" Desasociado) en Registrar instantáneas del montón mediante la herramienta Memoria (tipo de generación de perfiles "Instantánea del montón").

Consulte también

• Usar instrumentación de asignación en la escala de tiempo (tipo de generación de perfiles "Asignaciones en la escala de tiempo")
• Grabar instantáneas de montón con la herramienta Memoria (tipo de generación de perfiles "instantánea de montón")

Externo:

• Buscar y depurar fugas de memoria en JavaScript con Chrome DevTools : presentación de diapositivas (por Gonzalo Ruiz de Villa), que también se aplica a Microsoft Edge DevTools.

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0. La página original se encuentra aquí y está escrita por Kayce Basques.

Este trabajo está bajo una licencia Creative Commons Attribution 4.0 International.