基于新版Google Sites网站，如何用performance.memory获取网页全部资源总大小？

嘿，我来帮你搞定这个需求！结合你之前用performance.timing做书签工具的场景，下面是用performance.memory+其他API实现网页资源总大小统计的完整方案：

首先得明确：performance.memory是Chrome浏览器特有的API（Firefox、Safari暂不支持），它主要统计JS堆内存占用，和你要的「所有资源总大小」（图片、iframe、脚本等）不是完全一回事，但我们可以结合另一个API来补全，同时用memory数据做补充参考。

一、核心实现思路 #

要覆盖页面所有资源（包括Google Sites里的图片、iframe），需要两个方向配合：

1. 用performance.getEntriesByType('resource')直接获取每个已加载资源的字节大小（最准确的静态/动态资源统计）
2. 用performance.memory获取JS堆内存数据，作为页面运行时内存占用的补充

二、可直接用的书签工具代码 #

把下面这段代码复制到书签的「网址」栏，命名为「资源大小统计」，打开你的Google Sites页面后点击书签就能用：

javascript:(function(){
  // 1. 统计当前页面所有已加载资源的总大小
  const resourceEntries = performance.getEntriesByType('resource');
  let totalResourceSize = 0;
  resourceEntries.forEach(entry => {
    // 优先取包含HTTP头的transferSize，没有则用资源内容的encodedBodySize
    totalResourceSize += entry.transferSize || entry.encodedBodySize || 0;
  });

  // 2. 获取Chrome专属的JS堆内存信息
  let memoryInfo = null;
  if (window.performance && window.performance.memory) {
    memoryInfo = {
      used: (window.performance.memory.usedJSHeapSize / 1024 / 1024).toFixed(2) + ' MB',
      total: (window.performance.memory.totalJSHeapSize / 1024 / 1024).toFixed(2) + ' MB',
      limit: (window.performance.memory.jsHeapSizeLimit / 1024 / 1024).toFixed(2) + ' MB'
    };
  }

  // 3. 处理页面中的iframe资源（兼容Google Sites的嵌套页面）
  let iframeTotalSize = 0;
  const iframes = document.querySelectorAll('iframe');
  for (const iframe of iframes) {
    try {
      // 只有同源iframe能访问内部performance数据，跨域会被浏览器安全限制
      const iframeResources = iframe.contentWindow.performance.getEntriesByType('resource');
      iframeResources.forEach(entry => {
        iframeTotalSize += entry.transferSize || entry.encodedBodySize || 0;
      });
    } catch (e) {
      console.log(`无法统计跨域iframe资源：${iframe.src}`);
    }
  }

  // 格式化结果并弹窗展示
  const totalSizeMB = ((totalResourceSize + iframeTotalSize) / 1024 / 1024).toFixed(2) + ' MB';
  const totalSizeKB = ((totalResourceSize + iframeTotalSize) / 1024).toFixed(2) + ' KB';

  let resultMsg = `页面资源总大小：\n- 总计：${totalSizeMB}（${totalSizeKB}）\n`;
  if (memoryInfo) {
    resultMsg += `\nJS堆内存信息（仅Chrome）：\n- 已使用：${memoryInfo.used}\n- 总容量：${memoryInfo.total}\n- 上限：${memoryInfo.limit}`;
  }
  if (iframeTotalSize > 0) {
    const iframeSizeMB = (iframeTotalSize / 1024 / 1024).toFixed(2) + ' MB';
    resultMsg += `\n\n同源iframe资源总大小：${iframeSizeMB}`;
  }
  alert(resultMsg);
  console.log('资源详情可查看控制台：', resourceEntries);
})();

三、关键细节说明 #

• 资源统计逻辑：performance.getEntriesByType('resource')会捕获页面加载的所有资源（图片、脚本、样式、字体、iframe等），transferSize是从服务器获取的总字节数（包含HTTP头），比encodedBodySize更贴近实际传输大小。
• 跨域iframe限制：如果你的Google Sites嵌入了外部跨域页面，出于浏览器安全策略，无法访问它的performance数据，代码会自动捕获并在控制台提示。
• performance.memory的作用：它不统计静态资源的磁盘占用，但能反映页面运行时的内存负载，适合和资源总大小一起做性能参考。
• 和现有代码合并：如果想把这个统计和你之前的渲染耗时代码整合，只需要把两个逻辑放到同一个自执行函数里，合并弹窗内容即可。

内容的提问来源于stack exchange，提问作者Sindhu S