性能：measureUserAgentSpecificMemory() 方法

浏览器在创建对象时自动分配内存，并在对象不再可访问时释放内存（垃圾回收）。这种垃圾回收 (GC) 是一种近似值，因为确定特定内存块是否仍然需要的通用问题是不可能的（另请参阅JavaScript 内存管理）。开发人员需要确保对象被垃圾回收，内存没有泄漏，并且内存使用量不会随着时间的推移而无谓地增长，从而导致 Web 应用程序速度缓慢且无响应。内存泄漏通常是由于忘记注销事件侦听器、未关闭 worker、在数组中累积对象等原因造成的。

measureUserAgentSpecificMemory() API 聚合内存使用数据，以帮助你查找内存泄漏。它可用于内存回归检测或 A/B 测试功能，以评估其内存影响。最好定期调用此方法来跟踪内存使用量在会话期间的变化，而不是仅进行一次调用。

此 API 返回的 byte 值在不同浏览器或同一浏览器的不同版本之间不可比，因为这些值在很大程度上取决于实现。此外，breakdown 和 attribution 数组的提供方式也取决于浏览器。最好不要对这些数据进行任何硬编码的假设。此 API 旨在定期（以随机间隔）调用，以聚合数据并分析样本之间的差异。

无。

一个Promise，它解析为一个包含以下属性的对象

bytes

表示总内存使用量的数字。

breakdown

一个Array，它将总 bytes 分割并提供属性和类型信息。该对象包含以下属性

bytes

此条目描述的内存大小。

attribution

一个Array，它包含使用内存的 JavaScript 领域的容器元素。此对象具有以下属性

url

如果此属性对应于同源 JavaScript 领域，则此属性包含该领域的 URL。否则，它是字符串“cross-origin-url”。

container

一个描述包含此 JavaScript 领域的 DOM 元素的对象。此对象具有以下属性

id

容器元素的 id 属性。

src

容器元素的 src 属性。如果容器元素是<object> 元素，则此字段包含 data 属性的值。

scope

一个描述同源 JavaScript 领域类型的字符串。可以是 "Window"、"DedicatedWorkerGlobalScope"、"SharedWorkerGlobalScope"、"ServiceWorkerGlobalScope" 或跨源情况下的 "cross-origin-aggregated"。

types

与内存关联的实现定义的内存类型数组。

示例返回值如下所示

{
  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

如果未满足防止跨源信息泄漏的安全要求，则会抛出此异常。

你的网站需要处于安全上下文中。

需要设置两个标头才能跨源隔离你的网站

• Cross-Origin-Opener-Policy，值为 same-origin（保护你的来源免受攻击者侵害）
• Cross-Origin-Embedder-Policy，值为 require-corp 或 credentialless（保护受害者免受你的来源侵害）

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

要检查跨源隔离是否成功，你可以针对窗口和 worker 上下文中可用的Window.crossOriginIsolated 属性或WorkerGlobalScope.crossOriginIsolated 属性进行测试

if (crossOriginIsolated) {
  // Use measureUserAgentSpecificMemory
}

以下代码展示了如何使用指数分布，每五分钟以随机间隔调用一次 measureUserAgentSpecificMemory() 方法。

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()
• 使用 measureUserAgentSpecificMemory() 监控网页的总内存使用量 - web.dev