用於計算 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;

（感謝埃里克·艾格納。）

我把它變成一個Blob因為(new XMLSerializer().serializeToString(document)).length會給出 UTF-16 代碼單元的數量，而blob.size是字節數。

然后我認為這個 MDN 頁面應該為你解決剩下的問題：

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

Answer 2

這是我的代碼，就像一個魅力：

var res = performance.getEntriesByType('resource');

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

var totalSizeKB = totalSize / Math.pow(1024,1)

var totalSizeKB_decimal = (Math.round(totalSizeKB * 100)/100).toFixed(2);

$(".size span").html(totalSizeKB_decimal + " KB");