时间戳

首页 > 解决方案 > 网页中所有资产的总大小

javascript - 网页中所有资产的总大小

问题描述

我正在运行一个基于 Google 协作平台的新网站。本网站的页面可能包含其他网页的图像和 iframe。通过使用performance.timingAPI，我已经能够看到渲染页面需要多长时间：

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

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

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

标签： javascriptapi

解决方案

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

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

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

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

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

推荐阅读