如何使用JavaScript计算页面总重量并在页面加载后展示

实现原理 #

浏览器原生提供的Performance API可以直接获取页面所有加载资源的体积数据，无需引入第三方依赖，统计结果和开发者工具Network面板的数值一致。

可用实现代码 #

window.addEventListener('load', () => {
  // 计算所有外部资源总大小
  const resourceList = performance.getEntriesByType('resource');
  let totalBytes = resourceList.reduce((sum, item) => sum + (item.transferSize || 0), 0);
  // 加上页面本身HTML文档的大小
  const navEntry = performance.getEntriesByType('navigation')[0];
  totalBytes += navEntry?.transferSize || 0;

  // 单位转换，支持B/KB/MB自适应显示
  let showSize;
  if (totalBytes < 1024) {
    showSize = `${totalBytes} B`;
  } else if (totalBytes < 1024 * 1024) {
    showSize = `${(totalBytes / 1024).toFixed(2)} KB`;
  } else {
    showSize = `${(totalBytes / 1024 / 1024).toFixed(2)} MB`;
  }

  // 插入到页面指定位置，示例中ID为page-size的DOM节点
  const sizeDom = document.querySelector('#page-size');
  if (sizeDom) sizeDom.textContent = `页面总重量：${showSize}`;
});

注意事项 #

• 代码中transferSize代表资源经过网络传输的实际大小（包含gzip/br等压缩后的体积），如果需要统计资源解压后的实际占用体积，可以替换为decodedBodySize字段。
• 跨域资源如果服务端没有配置Timing-Allow-Origin响应头，对应的体积字段会返回0，需要对应资源的服务端配置允许跨域获取性能数据才能正常统计。
• 如果页面存在懒加载资源、异步加载的脚本/接口等动态内容，可以在对应内容加载完成后重新执行统计逻辑，更新总大小。

开发者工具参考示例 #

内容的提问来源于stack exchange，提问作者Dan Lee