javascript - 网页中所有 Assets 的总大小

Question

我正在运行一个基于 Google Sites New 的网站。本网站的页面可能包含其他网页的图像和 iframe。通过使用 performance.timing API，我已经能够看到页面呈现需要多长时间:

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

我已将这些保存为小书签，这样我就可以在任何网页上按下小书签。

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

Answer 1

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

The PerformanceResourceTiming interface enables retrieval and analysis of detailed network timing data regarding the loading of an application's resources.

因此，将所有这些工件的数据相加将得出站点上 Assets 的总大小:

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

这将获取 PerformanceResourceTiming 的所有条目，并对 decodedBodySize 属性求和。