Performance: measureUserAgentSpecificMemory() Methode

Keine.

Ein Promise, das auf ein Objekt aufgelöst wird, welches die folgenden Eigenschaften enthält:

bytes

Eine Zahl, die den gesamten Speicherverbrauch darstellt.

breakdown

Ein Array von Objekten, das die Gesamtanzahl der bytes aufteilt und Zuordnungs- sowie Typinformationen bereitstellt. Das Objekt enthält die folgenden Eigenschaften:

bytes

Die Größe des Speichers, den dieser Eintrag beschreibt.

attribution

Ein Array von Containerelementen der JavaScript-Realm, die den Speicher verwenden. Dieses Objekt hat die folgenden Eigenschaften:

url

Wenn diese Zuordnung zu einem gleichartigen JavaScript-Realm gehört, enthält diese Eigenschaft die URL des Realms. Andernfalls ist es die Zeichenkette "cross-origin-url".

container

Ein Objekt, das das DOM-Element beschreibt, das diesen JavaScript-Realm enthält. Dieses Objekt hat die folgenden Eigenschaften:

id

Das id-Attribut des Containerelements.

src

Das src-Attribut des Containerelements. Wenn das Containerelement ein <object>-Element ist, enthält dieses Feld den Wert des data-Attributs.

scope

Eine Zeichenkette, die den Typ des gleichartigen JavaScript-Realm beschreibt. Entweder "Window", "DedicatedWorkerGlobalScope", "SharedWorkerGlobalScope", "ServiceWorkerGlobalScope" oder "cross-origin-aggregated" für den Cross-Origin-Fall.

types

Ein Array von implementierungsdefinierten Speichertypen, die mit dem Speicher verbunden sind.

Ein Beispiel für den Rückgabewert sieht folgendermaßen aus:

{
  bytes: 1500000,
  breakdown: [
    {
      bytes: 1000000,
      attribution: [
        {
          url: "https://example.com",
          scope: "Window",
        },
      ],
      types: ["DOM", "JS"],
    },
    {
      bytes: 0,
      attribution: [],
      types: [],
    },
    {
      bytes: 500000,
      attribution: [
        {
          url: "https://example.com/iframe.html"
          container: {
            id: "example-id",
            src: "redirect.html?target=iframe.html",
          },
          scope: "Window",
        }
      ],
      types: ["JS", "DOM"],
    },
  ],
}

SecurityError DOMException

Wird ausgelöst, wenn die Sicherheitsanforderungen zum Verhindern von Cross-Origin-Informationslecks nicht erfüllt sind.

Der Browser weist automatisch Speicher zu, wenn Objekte erstellt werden, und gibt ihn frei, wenn sie nicht mehr erreichbar sind (Garbage Collection). Diese Garbage Collection (GC) ist eine Annäherung, da das generelle Problem, festzustellen, ob ein bestimmtes Speicherstück noch benötigt wird, unmöglich ist (siehe auch JavaScript-Speicherverwaltung). Entwickler müssen sicherstellen, dass Objekte der Garbage Collection unterliegen, kein Speicher ausläuft, und der Speicherverbrauch nicht unnötig über die Zeit wächst, was zu langsamen und nicht reagierenden Webanwendungen führt. Speicherlecks werden typischerweise eingeführt, indem vergessen wird, einen Event Listener abzumelden, einen Worker zu schließen, Objekte in Arrays zu akkumulieren, und mehr.

Die measureUserAgentSpecificMemory() API aggregiert Speicherverbrauchsdaten, um Ihnen bei der Suche nach Speicherlecks zu helfen. Sie kann zur Erkennung von Speicherregressionen oder für A/B-Tests von Funktionen zur Bewertung ihrer Auswirkung auf den Speicher genutzt werden. Anstatt einzelne Aufrufe an diese Methode zu tätigen, ist es besser, periodische Aufrufe zu machen, um zu verfolgen, wie sich der Speicherverbrauch im Verlauf einer Sitzung verändert.

Die byte-Werte, die diese API zurückgibt, sind weder über verschiedene Browser hinweg noch zwischen verschiedenen Versionen desselben Browsers vergleichbar, da sie stark implementierungsabhängig sind. Auch wie breakdown und attribution Arrays bereitgestellt werden, liegt ebenfalls beim Browser. Es ist am besten, keine Annahmen über diese Daten fest in den Code zu integrieren. Diese API ist dazu gedacht, periodisch (mit einem zufälligen Intervall) aufgerufen zu werden, um Daten zu aggregieren und den Unterschied zwischen den Proben zu analysieren.

Um diese Methode zu verwenden, muss Ihr Dokument in einem sicheren Kontext und cross-origin-isoliert sein.

Sie können die Eigenschaften Window.crossOriginIsolated und WorkerGlobalScope.crossOriginIsolated verwenden, um zu überprüfen, ob das Dokument cross-origin-isoliert ist:

if (crossOriginIsolated) {
  // Use measureUserAgentSpecificMemory
}

Der folgende Code zeigt, wie die measureUserAgentSpecificMemory() Methode einmal alle fünf Minuten in einem zufälligen Intervall unter Verwendung der Exponentialverteilung aufgerufen wird.

function runMemoryMeasurements() {
  const interval = -Math.log(Math.random()) * 5 * 60 * 1000;
  console.log(`Next measurement in ${Math.round(interval / 1000)} seconds.`);
  setTimeout(measureMemory, interval);
}

async function measureMemory() {
  const memorySample = await performance.measureUserAgentSpecificMemory();
  console.log(memorySample);
  runMemoryMeasurements();
}

if (crossOriginIsolated) {
  runMemoryMeasurements();
}

• setTimeout()
• Überwachen des gesamten Speicherverbrauchs Ihrer Webseite mit measureUserAgentSpecificMemory() - web.dev