JavaScript可以获取当前页面消耗的总流量吗？

Question

如题，可以在前端做到统计页面消耗的字节数吗？

Answer 1

performance.getEntriesByType('resource') 用找个可以获取到页面上所有加载的资源，然后计算他们的 encodedBodySize。

const size = Array.from(performance.getEntriesByType('resource')).reduce((a,b)=>a+b.encodedBodySize,0)

console.log(size)

performance.getEntriesByType('navigation') 的 encodedBodySize 可以获取到页面的大小。

结合一下

const size = performance.getEntries().filter(v=>['resource','navigation','frame'].includes(v.entryType)).reduce((a,b)=>a+b.encodedBodySize,0)/1024

console.log(size)

不过刚刚测试了一下，好像不是很准 😂，跟浏览器的 Network 显示有些差异。

Answer 2

可以参考一下performance.getEntries()

const totalSize = performance.getEntries().reduce((sum, item) => sum + (item.encodedBodySize || 0), 0)

希望能帮助到你。