Solucionar problemas de memoria
Para buscar problemas de memoria que afectan al rendimiento de la página, incluidas las pérdidas de memoria, la saturación de memoria y las recolecciones de elementos no utilizados frecuentes, use las herramientas siguientes:
- Administrador de tareas del explorador Microsoft Edge.
- Casilla Memoria de la herramienta Rendimiento.
- Los distintos tipos de generación de perfiles de la herramienta Memoria .
Herramientas para investigar el uso de memoria
| Caso de uso | Herramienta | Artículo |
|---|---|---|
| Supervise la cantidad de memoria que usa una página web en tiempo real. | Administrador de tareas del explorador Microsoft Edge | Supervisión del uso de memoria en tiempo real (Administrador de tareas del explorador Microsoft Edge) |
| Visualice el uso de memoria de una página web durante un período de tiempo. | Casilla memoria de la herramienta > de rendimiento | Visualización de pérdidas de memoria (herramienta de rendimiento: casilla Memoria) en Referencia de características de rendimiento. |
| Detectar recolecciones de elementos no utilizados frecuentes. | Administrador de tareas del explorador Microsoft Edge o casilla memoria de la herramienta >de rendimiento | A continuación se indican las recolecciones de elementos no utilizados frecuentes (Administrador de tareas del explorador Microsoft Edge, la casilla Memoria de la herramienta de rendimiento). |
| Inspeccione el contenido de la memoria utilizada por una página web. | Instantánea del montón de la herramienta >de memoria | Registro de instantáneas de montón mediante la herramienta Memoria ("Tipo de generación de perfiles instantánea del montón") |
| Descubra qué objetos de JavaScript se crean durante un período de tiempo para aislar las pérdidas de memoria. | Asignaciones de herramientas > de memoria en la escala de tiempo | Usar instrumentación de asignación en la escala de tiempo ("Asignaciones en la escala de tiempo" tipo de generación de perfiles) |
| Descubra 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. | Muestreo de asignación de herramientas >de memoria | Acelerar el tiempo de ejecución de JavaScript ("Tipo de generación de perfiles de muestreo de asignación") |
| Busque pérdidas de memoria del árbol DOM. | Elementos desasociados de la herramienta >de memoria | Depurar pérdidas de memoria DOM ("Elementos desasociados" tipo de generación de perfiles) |
La herramienta Memoria
La herramienta principal para investigar problemas de memoria es la herramienta Memoria :
Un perfil de elementos desasociados en la herramienta Memoria :
Para volver a la lista de botones de opción para los tipos de generación de perfiles, en la parte superior izquierda de la herramienta Memoria , haga clic en Perfiles (
).
Introducción a la corrección de problemas de memoria
En el espíritu del modelo de rendimiento RAIL , el foco de los esfuerzos de rendimiento deben ser los usuarios.
Los problemas de memoria son importantes porque los usuarios suelen percibirlos. Los usuarios pueden percibir problemas de memoria de las siguientes maneras:
El rendimiento de una página empeora progresivamente con el tiempo. Posiblemente se trata de un síntoma de pérdida de memoria. Una 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 con el tiempo.
El rendimiento de una página es constantemente malo. Este es posiblemente un síntoma de hinchazón de memoria. La saturación de memoria se produce cuando una página usa más memoria de la necesaria para una velocidad de página óptima.
El rendimiento de una página se retrasa o parece pausarse con frecuencia. Este es posiblemente un síntoma de recolecciones de elementos no utilizados frecuentes. La recolección de elementos no utilizados es cuando el explorador reclama memoria. El explorador decide cuándo ocurre esto. Durante las colecciones, todo el script que se ejecuta está en pausa. Por lo tanto, si el explorador está recogiendo mucho elementos no utilizados, el tiempo de ejecución del script se va a pausar mucho.
Hinchazón de memoria: ¿Cuánto es "demasiado"?
Una pérdida de memoria es fácil de definir. Si un sitio usa progresivamente más y más memoria, tiene una pérdida. Pero el exceso de memoria es un poco más difícil de anclar. ¿Qué califica como "usar demasiada memoria"?
Aquí no hay números duros, ya que los diferentes dispositivos y exploradores tienen diferentes funcionalidades. La misma página que se ejecuta sin problemas en un smartphone de gama alta puede bloquearse en un smartphone de gama baja.
La clave aquí es usar el modelo RAIL y centrarse en los 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 constantemente incorrecta, es posible que la página supere las capacidades de memoria de esos dispositivos.
Detectar recolecciones de elementos no utilizados frecuentes (casilla Administrador de tareas del explorador Microsoft Edge, Memoria de la herramienta de rendimiento)
Si la página parece pausarse con frecuencia, es posible que tenga problemas de recolección de elementos no utilizados. Para detectar la recolección de elementos no utilizados frecuentes, puede usar:
Administrador de tareas del explorador Microsoft Edge. Los valores de memoria o memoria de JavaScript que aumentan y bajan con frecuencia representan una recolección frecuente de elementos no utilizados. Consulte Supervisión del uso de memoria en tiempo real (Administrador de tareas del explorador Microsoft Edge).
Casilla Memoria de la herramienta Rendimiento. En las grabaciones de memoria de rendimiento, los cambios frecuentes (aumento y caída) 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 de la herramienta Memoria en el tipo de generación de perfiles de escala de tiempo para averiguar dónde se asigna memoria y qué funciones están causando las asignaciones. Consulte Uso de la instrumentación de asignación en la escala de tiempo ("Asignaciones en la escala de tiempo" tipo de generación de perfiles).
Búsqueda de pérdidas de memoria de árbol DOM de elementos desasociados
El explorador solo recopila un nodo DOM cuando no hay referencias al nodo desde el árbol DOM o el 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 siguen haciendo referencia a él. Los nodos DOM desasociados son una causa común de pérdidas de memoria.
Herramientas para investigar elementos desasociados
| Caso de uso | Herramienta | Artículo |
|---|---|---|
| Mostrar solo elementos desasociados, como nodos de árbol DOM. | Tipo de generación de perfiles de elementos desasociados de la herramienta >de memoria | Depurar pérdidas de memoria DOM ("Elementos desasociados" tipo de generación de perfiles) |
| Mostrar todos los objetos en memoria, filtrados para mostrar elementos desasociados, con vínculos al código fuente de JavaScript. | Tipo de generación de perfiles de >instantáneas de montón de la herramienta >de memoriadesasociada | Busque pérdidas de memoria de árbol DOM ("Tipo > de generación de perfiles instantáneas del montón" Desasociado) en Registro de instantáneas de montón mediante la herramienta Memoria ("Tipo de generación de perfiles instantánea del montón"). |
| Mostrar solo elementos desasociados, como nodos de árbol DOM, con vínculos al código fuente de JavaScript. | Herramienta Elementos desasociados | Depuración de pérdidas de memoria DOM mediante la herramienta Elementos desasociados |
Consulte también
- Usar instrumentación de asignación en la escala de tiempo ("Asignaciones en la escala de tiempo" tipo de generación de perfiles)
- Depuración de pérdidas de memoria DOM mediante la herramienta Elementos desasociados
- Registro de instantáneas de montón mediante la herramienta Memoria ("Tipo de generación de perfiles instantánea del montón")
Externo:
- Búsqueda y depuración de fugas de memoria en JavaScript con Chrome DevTools - 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á creada por Kayce Basques.
Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.