网页中所有资产的总大小

Question

我正在运行基于Google协作平台的新网站。该网站的网页可能包含其他网页的图片和iframe。通过使用performance.timing API，我已经能够看到页面呈现需要多长时间：

window.performance.timing.responseEnd - window.performance.timing.navigationStart;
window.performance.timing.loadEventStart - window.performance.timing.domLoading;

我已将这些保存为bookmarklet，因此我可以在任何网页上按下书签。

使用performance.memory我想知道在任何特定网页上下载的所有资产的大小。我该怎么做呢？

Answer 1

我相信使用PerformanceResourceTiming是你最好的选择。根据文档：

  

PerformanceResourceTiming接口可以检索和分析有关加载应用程序资源的详细网络计时数据。

总结所有这些文物＆＃39;数据将产生网站上资产的总大小：

var res = performance.getEntriesByType('resource');
var totalSize = res.reduce((size, item) => {
  size += item.decodedBodySize;
  return size;
}, 0);

这将获取PerformanceResourceTiming的所有条目，并将decodedBodySize属性汇总。