用于计算 html 页面大小的 javascript/jquery 脚本

Question

我正在寻找一个脚本来计算和显示 html 页面的大小/重量(以 kb 为单位)，就像在这个页面上一样:https://solar.lowtechmagazine.com/
页面大小:403.86KB
所有资源的总大小(文本、图像、脚本...)
我找到了一个 Pelican 插件:https://git.vvvvvvaria.org/rra/page_metadata但我需要使用 javascript/jquery。
有任何想法吗 ？
我在网上找不到任何资源，有什么想法吗？

Answer 1

对于主页，您可以使用:

let mainHTMLsize = (new Blob([new XMLSerializer().serializeToString(document)], {type: 'text/html'})).size;

(感谢 Eric Aigner。)
我把它变成了 Blob因为 (new XMLSerializer().serializeToString(document)).length将给出 UTF-16 代码单元的数量，而 blob.size是字节数。
然后我想 this MDN page应该为您解决其余的问题:

const p = performance.getEntriesByType("resource");
for (let i=0; i < p.length; i++) 
{
  console.log(`${p[i].name} decodedBodySize = ${p[i].decodedBodySize}`);
}