JavaScript中如何计算fetch()返回HTML内容的文件大小（KB/MB）

计算HTML字符串真实文件大小的核心是准确拿到字符串的UTF-8编码字节数，再按1024进制换算为KB、MB单位即可。

核心原理 #

• 不要直接用字符串length属性计算大小：JS字符串以UTF-16码元为单位计数，中文、emoji等多字节字符会被少算，必须用UTF-8编码后的真实字节数作为计算基准。
• 原生TextEncoderAPI可以直接把字符串转成UTF-8编码的字节数组，取byteLength就能拿到精确字节数，所有现代浏览器、Node.js环境都原生支持，不需要额外依赖。
• 单位换算规则：1KB = 1024 Byte，1MB = 1024 KB，数值超过当前单位阈值时自动进位到更大单位。

完整代码 #

首先封装通用计算函数，再结合fetch调用场景使用：

// 计算HTML内容大小的工具函数
function getHtmlFileSize(htmlContent) {
  // 转UTF-8字节数组取真实字节数
  const byteLength = new TextEncoder().encode(htmlContent).byteLength;
  
  const unitList = ['B', 'KB', 'MB'];
  let size = byteLength;
  let unitIndex = 0;
  // 循环换算到合适单位
  while (size >= 1024 && unitIndex < unitList.length - 1) {
    size /= 1024;
    unitIndex++;
  }

  return {
    totalBytes: byteLength,
    displayValue: Number(size.toFixed(2)),
    unit: unitList[unitIndex],
    displayText: `${size.toFixed(2)} ${unitList[unitIndex]}`
  };
}

// 结合fetch的使用示例
async function fetchDataAndCalcSize() {
  const response = await fetch('你的接口地址');
  const result = await response.json();
  // 传入接口返回的content字段计算
  const sizeInfo = getHtmlFileSize(result.content);
  // 直接输出格式化结果，例："HTML片段文件大小：24.68 KB"
  console.log(`HTML片段文件大小：${sizeInfo.displayText}`);
  return sizeInfo;
}

// 执行调用
fetchDataAndCalcSize().catch(err => console.error('请求或计算出错:', err));

注意点 #

• 如果需要计算整个接口响应的大小，不需要解析content字段计算，直接读取响应头的Content-Length字段即可拿到整个响应体的字节数。
• 如果要兼容IE这类不支持TextEncoder的老旧环境，需要手动实现UTF-8编码字节计数逻辑，目前绝大多数业务场景不需要做这层兼容。
• 计算结果默认保留2位小数，如果需要更高精度可以调整toFixed()的传入参数。

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