javascript - 如何以编程方式计算网页传输的大小？Chrome 扩展程序

Question

我正在开发一个 chrome 扩展，我想以编程方式计算这个值（检查屏幕截图）。

我尝试过 Performance API 的方法，但值不同。我不想将调试器附加到网页或添加自定义开发面板

const transferSize = performance.getEntriesByType('resource').map(item => item.transferSize).reduce((total, item) => total + item);
const encodedBodySize= performance.getEntriesByType('resource').map(item => item.encodedBodySize).reduce((total, item) => total + item);
const decodedBodySize= performance.getEntriesByType('resource').map(item => item.decodedBodySize).reduce((total, item) => total + item);

标签： javascriptgoogle-chrome-extension

Answer 1

你的逻辑在我看来是正确的。但是，在下面的代码中有一件事看起来很奇怪：

performance.getEntriesByType('resource').length;

上面给了我仅资源类型的请求调用的长度，但您实际上可能需要的是所有网络调用的传输大小，而不仅仅是资源类型。这一定是 transferSize 不匹配的原因。

我尝试了以下代码，在我看来：

var count = 0;
performance.getEntries().map(item => item.transferSize).forEach(size => {
if (typeof size == 'number') {
count = count + size;
}
});

此代码返回所有网络调用的 transferSize，请求调用的长度也匹配。我提供了一张typeof支票，因为有一些undefined传输大小