Aprenda a medir el uso de memoria de su página Netz en producción para detectar regresiones.
Das Browser gestionan la memoria de las páginas web de forma automática. Siempre y cuando una página web crea un objeto, el Browser asigna una parte de la memoria «debajo del capó» para guardar el objeto. Ya que la memoria es un recurso finito, el navegador realiza una recolección de basura para detectar cuando un objeto ya no hace falta y para liberar el bloque de memoria subyacente. A pesar de todo, la detección no es perfecta y
Es wurde getestet que la detección perfecta es una tarea imposible. Por ende, los navegadores aproximan la noción de «un objeto hace falta» con la noción de «un objeto es alcanzable». Si la página web no puede llegar a un objeto a través de sus variables y los campos de otros objetos accesibles, entonces el navegador puede recuperar el objeto de forma segura. La diferencia entre estas dos nociones conduce a pérdidas de memoria como se ilustra en el siguiente ejemplo.
const object = { zu: new Array(1000), b: new Array(2000) };
setInterval(() => console.Log(object.zu), 1000);Hier die größte Matrix b ya no hace falta, pero el navegador no lo recupera debido a que aún es alcanzable a través de object.b en la devolución de llamada. Por ende, se filtra la memoria de la matriz más grande.
Speicherlecks sind im Web weit verbreitet. Es fácil introducir uno olvidándose de anular el registro de un detector de eventos, capturando accidentalmente objetos de un iframe, no cerrando un empleado, acumulando objetos en matrices, etc. Si una página web tiene pérdidas de memoria, su uso de memoria aumenta con el tiempo y la página web parece lenta e hinchada para los usuarios.
El primer paso para solucionar este problema es medirlo. El nuevo
performance.measureMemory() API posibilita a los desarrolladores medir el uso de memoria de sus páginas web en producción y así detectar pérdidas de memoria que se escapan a través de pruebas locales.
Wie ist das performance.measureMemory () distinto al legado Performance.Speicher API?
Wenn Sie mit dem vorhandenen Nicht-Standard vertraut sind Performance.Speicher API, es factible que se pregunte en qué se diferencia la nueva API. La principal diferencia es que la API anterior devuelve el tamaño del montón de JavaScript, mientras que la nueva API estima el uso de memoria de toda la página web. Esta diferencia se torna importante cuando Chrome comparte el mismo montón con varias páginas web (o varias instancias de la misma página web). En tales casos, el resultado de la antigua API puede estar arbitrariamente apagado. Ya que la antigua API se establece en términos específicos de implementación como «montón», estandarizarla es inútil.
Otra diferencia es que la nueva API realiza mediciones de memoria durante la recolección de basura. Esto reduce el ruido en los resultados, pero puede llevar un tiempo hasta que se produzcan los resultados. Tenga en cuenta que otros navegadores pueden elegir poner en práctica la nueva API sin depender de la recolección de basura.
Vorgeschlagene Anwendungsfälle
El uso de memoria de una página web depende del momento de los eventos, las acciones del Nutzername y las recolecciones de basura. Es es por esto que que la API de medición de memoria está diseñada para agregar datos de uso de memoria de producción. Los resultados de las llamadas individuales son menos útiles. Casos de uso de ejemplo:
- Detección de regresión durante el lanzamiento de una versión nueva de la página web para detectar nuevas fugas de memoria.
- Prueba A / B de una nueva función para examinar su impacto en la memoria y detectar pérdidas de memoria.
- Korrelieren Sie die Speichernutzung mit der Sitzungsdauer, um das Vorhandensein oder Fehlen von Speicherlecks zu überprüfen.
- Correlacionar el uso de la memoria con las métricas del usuario para entender el impacto general del uso de la memoria.
Browser-Kompatibilität
En este momento, la API solo es compatible con Chrome 83 como prueba de origen. El resultado de la API depende en gran medida de la implementación debido a que los navegadores disponen diferentes formas de representar objetos en la memoria y diferentes formas de estimar el uso de la memoria. Los navegadores pueden excluir algunas regiones de memoria de la contabilidad si la contabilidad adecuada es demasiado cara o inviable. Por ende, los resultados no se pueden comparar entre navegadores. Solo tiene sentido comparar los resultados para el mismo navegador.
Tatsächlicher Zustand
| Er ging vorbei | Bedingung |
|---|---|
| 1. Erstellen Sie einen Erklärer | Fertigstellen |
| 2. Erstellen Sie eine erste Entwurfsspezifikation | In Bearbeitung |
| 3. Sammeln Sie Feedback und wiederholen Sie das Design | In Bearbeitung |
| 4. Herkunftsnachweis | In Bearbeitung |
| 5. Starten Sie | Nicht angefangen |
Verwenden von performance.measureMemory ()
Habilitar el apoyo durante la etapa de prueba de origen
das performance.measureMemory () La API se encuentra disponible como prueba de origen a partir de Chrome 83. Se espera que la prueba de origen finalice en Chrome 86 a principios de noviembre de 2020.
Las pruebas de Origin le posibilitan probar nuevas funciones y otorgar comentarios sobre su usabilidad, practicidad y efectividad a la comunidad de estándares web. Para conseguir más información, consulte el Origin-Testhandbuch für Webentwickler. Um sich für diesen oder einen anderen Herkunftsnachweis anzumelden, besuchen Sie die Registrierungsseite.
Registrieren Sie sich für den Herkunftsnachweis
- Fordern Sie einen Token an von Ihrer Herkunft.
- Fügen Sie das Token Ihren Seiten hinzu. Es gibt zwei Möglichkeiten, dies zu tun:
Aktivierung über chrome: // flags
Zum Experimentieren performance.measureMemory () Aktivieren Sie ohne einen Ursprungsnachweis das #experimental-Web-Plattform-Funktionen Flagge an chrome://flags.
Funktionserkennung
das performance.measureMemory () Die Funktion kann mit a fehlschlagen
Sicherheitsfehler si el entorno de ejecución no alcanza con los requerimientos de seguridad para prevenir fugas de información de origen cruzado. Durante la prueba de origen en Chrome, la API necesita que Standortisolation aktiviert. Wenn die API gesendet wird, hängt dies davon ab
Ursprungsübergreifende Isolierung. Una página web puede elegir por el aislamiento de origen cruzado configurando COOP + COEP-Header.
wenn (performance.measureMemory) {
Lassen result;
try {
result = erwarten performance.measureMemory();
} catch (Error) {
wenn (Error instanceof DOME-Ausnahme &&
Error.Süßkartoffel === "SecurityError") {
console.Log("The context is not secure.");
} else {
throw Error;
}
}
console.Log(result);
}Lokale Tests
Chrome realiza la medición de la memoria durante la recolección de basura. Esto significa que la API no resuelve la promesa de resultado de inmediato y, en cambio, espera la próxima recolección de basura. La API fuerza una recolección de basura luego de un tiempo de espera, que en este momento está establecido en 20 segundos. Iniciando Chrome con el
--enable-blink-features = 'ForceEagerMeasureMemory' Die Eingabeaufforderung reduziert die Wartezeit auf Null und ist nützlich für lokales Debuggen und Testen.
Beispiel
El uso recomendado de la API es establecer un monitor de memoria global que muestree el uso de memoria de toda la página web y envíe los resultados a un servidor para su agregación y análisis. La forma más sencilla es tomar muestras de forma periódica, a modo de ejemplo, cada M. minutos. A pesar de todo, esto introduce un sesgo en los datos debido a que pueden producirse picos de memoria entre las muestras. El siguiente ejemplo muestra cómo realizar mediciones de memoria insesgadas usando un Procedimiento de Poisson, um sicherzustellen, dass Proben zu jeder Zeit gleich wahrscheinlich sind (Manifestation, Quelle).
Primero, defina una función que programe la próxima medición de memoria utilizando
setTimeout () con un intervalo aleatorio. La función debe llamarse luego de cargar la página en la ventana principal.
Funktion scheduleMeasurement() {
wenn (!performance.measureMemory) {
console.Log("performance.measureMemory() is not available.");
Rückkehr;
}
const interval = measurementInterval();
console.Log("Scheduling memory measurement in " +
Math.runden(interval / 1000) + " seconds.");
setTimeout(performMeasurement, interval);
}
Fenster.onload = Funktion () {
scheduleMeasurement();
}
das MeasurementInterval () Die Funktion berechnet ein zufälliges Intervall in Millisekunden, sodass durchschnittlich alle fünf Minuten eine Messung durchgeführt wird. Uhr Exponentialverteilung wenn Sie sich für die Mathematik hinter der Funktion interessieren.
Funktion measurementInterval() {
const MEAN_INTERVAL_IN_MS = 5 * 60 * 1000;
Rückkehr -Math.Log(Math.random()) * MEAN_INTERVAL_IN_MS;
}En resumen, el async performMeasurement () La función invoca la API, registra el resultado y programa la próxima medición.
async function performMeasurement() {
let result;
try {
result = await performance.measureMemory();
} catch (error) {
if (error instanceof DOMException &&
error.name === "SecurityError") {
console.log("The context is not secure.");
return;
}
throw error;
}
console.log("Memory usage:", result);
scheduleMeasurement();
}Das Ergebnis kann wie folgt gesehen werden:
{
Bytes: 60_000_000,
abbauen: [
{
Bytes: 40_000_000,
Zuschreibung: ["https://foo.com"],
userAgentSpecificTypes: ["Window", "JS"]
},
{
Bytes: 20_000_000,
Zuschreibung: ["https://foo.com/iframe"],
userAgentSpecificTypes: ["Window", "JS"]
}
]
}Die Schätzung der gesamten Speichernutzung wird in der zurückgegeben Bytes campo. El valor de bytes está utilizando Zahlentrenner-Syntax. Este valor depende en gran medida de la implementación y no se puede comparar entre navegadores. Inclusive puede cambiar entre diferentes versiones del mismo navegador. Durante la prueba de origen, el valor incluye el uso de memoria JavaScript de la ventana principal y todos
gleicher Ort iframes y ventanas asociadas. Cuando se envía la API, el valor tendrá en cuenta JavaScript y la memoria DOM de todos los iframes, ventanas asociadas y empleados web.
das abbauen El listado proporciona más información sobre la memoria utilizada. Cada entrada describe una parte de la memoria y la atribuye a un recopilatorio de ventanas, iframes y empleados identificados por Url. das userAgentSpecificTypes
Das Feld listet die implementierungsspezifischen Speichertypen auf, die dem Speicher zugeordnet sind.
Es esencial tratar todas las listas de forma genérica y no codificar suposiciones sustentadas en un navegador en particular. A modo de ejemplo, algunos navegadores pueden devolver un abbauen oder eine Leere Zuschreibung. Andere Browser geben möglicherweise mehrere URLs zurück Zuschreibung Dies zeigt an, dass sie nicht erkennen konnten, welche dieser URLs den Speicher besitzt.
Feedback
das Community Web Performance Group und das Chrome-Team würde gerne Ihre Gedanken und Erfahrungen mit hören
performance.measureMemory ().
Erzählen Sie uns etwas über das API-Design
¿Puede haber algo en la API que no funcione como se esperaba? ¿O faltan propiedades que necesitas para poner en práctica tu idea? Presentar un obstáculo de especificaciones en el Performance.measureMemory GitHub-Repository oder fügen Sie Ihre Gedanken zu einem bestehenden Hindernis hinzu.
Informar un obstáculo con la implementación
¿Encontraste un error con la implementación de Chrome? ¿O la implementación es distinto de la especificación? Presentar un error en new.crbug.com. Stellen Sie sicher, dass Sie so viele Details wie möglich angeben, einfache Anweisungen zum Reproduzieren des Fehlers bereitstellen und Komponenten (bearbeiten) angepasst an Blinken> PerformanceAPIs.
Fehler funktioniert hervorragend für das schnelle und einfache Teilen von Wiederholungen.
Unterstützung zeigen
¿Está planeando utilizar performance.measureMemory ()? Su apoyo público ayuda al equipo de Chrome a priorizar funciones y muestra a otros proveedores de navegadores lo importante que es brindarles soporte. Enviar un Tweet zu @Cromodev y háganos saber dónde y cómo lo está utilizando.
Links Útiles
Vielen Dank
Muchas gracias a Domenic Denicola, Yoav Weiss, Mathias Bynens por las revisiones de diseño de API y a Dominik Inführ, Hannes Payer, Kentaro Hara, Michael Lippautz por las revisiones de código en Chrome. Además agradezco a Per Parker, Philipp Weis, Olga Belomestnykh, Matthew Bolohan y Neil Mckay por otorgar valiosos comentarios de los usuarios que mejoraron enormemente la API.
Heldenbild por Harrison Broadbent en Unsplash
