如何获取已加载完整页面的KB级大小？

JavaScript 实现 #

你之前的代码只统计了resource类型的资源，而页面本身的加载数据属于navigation类型的性能条目，需要把这两部分数据合并计算：

// 获取页面本身的加载数据
const navEntry = performance.getEntriesByType('navigation')[0];
// 获取所有静态资源的加载数据
const resourceEntries = performance.getEntriesByType('resource');

// 计算总传输大小：页面本身 + 所有资源
let totalSizeTransfer = navEntry.transferSize;
resourceEntries.forEach(item => {
  totalSizeTransfer += item.transferSize || 0; // 兼容缓存资源transferSize为0的情况
});

// 转换为KB并保留两位小数输出
console.log("总传输大小：", (totalSizeTransfer / 1024).toFixed(2) + " KB");

补充说明 #

• 如果资源是从本地缓存加载的，transferSize会返回0，此时可以根据需求改用encodedBodySize（压缩后的响应体大小）或decodedBodySize（解压后的实际大小）。
• 务必在页面完全加载后执行代码，比如放在window.onload回调里，避免遗漏未加载完成的资源。

PHP 实现 #

PHP作为服务端语言，无法直接获取客户端浏览器实际加载的总大小，但可以通过两种方式统计近似值：

1. 统计当前页面输出内容的大小 #

通过输出缓冲捕获页面内容，计算其字节大小：

<?php
ob_start(); // 开启输出缓冲

// 这里是你的页面内容（HTML、PHP逻辑输出等）
echo "<!DOCTYPE html><html><body>页面内容</body></html>";

$pageContent = ob_get_contents();
ob_end_flush();

// 转换为KB并保留两位小数
$pageSizeKB = round(strlen($pageContent) / 1024, 2);
echo "当前页面输出大小：{$pageSizeKB} KB";
?>

2. 统计关联静态资源的总大小 #

遍历静态资源目录（如CSS、图片、JS文件夹），计算所有文件的大小总和：

<?php
function calculateStaticSize($dir) {
    $totalSize = 0;
    $files = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($dir));
    
    foreach ($files as $file) {
        if (!$file->isDir()) {
            $totalSize += $file->getSize();
        }
    }
    return round($totalSize / 1024, 2);
}

// 示例：统计css和images目录的资源大小
$cssSize = calculateStaticSize('./css');
$imageSize = calculateStaticSize('./images');
$totalStaticSize = $cssSize + $imageSize;

echo "静态资源总大小：{$totalStaticSize} KB";
?>

补充说明 #

• PHP统计的是文件原始大小，如果服务器开启了Gzip压缩，客户端实际加载的会是压缩后的更小尺寸，若要统计压缩后的大小，可以通过curl模拟请求获取响应头的Content-Length值。

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