如何用JavaScript计算网页的数据成本？

核心说明 #

可以用JavaScript实现网页数据总量统计，但要先明确两个关键限制：

1. 跨域限制：浏览器同源策略会阻止直接从当前页面请求其他域名的资源，除非目标网站配置了CORS。所以直接在控制台输入代码请求外部域名大概率失败。
2. 资源覆盖范围：要统计所有资源（HTML、CSS、JS、图片、字体等），需要追踪页面加载的每一项资源，包括动态加载内容。

两种可行实现场景 #

场景1：在目标页面控制台运行（无跨域问题） #

打开目标页面（比如bbc.com）后，在浏览器控制台输入以下代码，即可统计当前页面已加载资源的总大小：

// 获取所有已完成的网络请求记录
const resources = performance.getEntriesByType('resource');
let totalSize = 0;

// 遍历资源累加大小（encodedBodySize是传输时的压缩大小，decodedBodySize是解压后大小，按需选择）
resources.forEach(resource => {
  totalSize += resource.encodedBodySize || 0;
});

// 转换为易读的大小格式
function formatSize(bytes) {
  if (bytes < 1024) return `${bytes} B`;
  else if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  else return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

console.log('页面总数据量：', formatSize(totalSize));

场景2：搭建本地工具（解决跨域，适合批量查询） #

如果想做一个输入域名就统计的工具，需要用Node.js做代理服务器绕过跨域限制，以下是极简新手友好版：

1. 初始化项目并安装依赖：

npm init -y
npm install axios cheerio

2. 创建sizeChecker.js文件：

const axios = require('axios');
const cheerio = require('cheerio');

async function getTotalPageSize(url) {
  // 补全URL协议头
  if (!url.startsWith('http')) url = `https://${url}`;
  
  let totalSize = 0;

  try {
    // 请求HTML页面并累加大小
    const htmlResponse = await axios.get(url);
    totalSize += htmlResponse.headers['content-length'] || Buffer.byteLength(htmlResponse.data, 'utf8');
    
    // 解析HTML中的静态资源链接
    const $ = cheerio.load(htmlResponse.data);
    const resourceLinks = [
      ...$('link[rel="stylesheet"]').map((i, el) => $(el).attr('href')).get(),
      ...$('script[src]').map((i, el) => $(el).attr('src')).get(),
      ...$('img[src]').map((i, el) => $(el).attr('src')).get()
    ];

    // 遍历资源，用HEAD请求获取大小（不下载完整内容）
    for (const link of resourceLinks) {
      try {
        const fullUrl = new URL(link, url).href;
        const res = await axios.head(fullUrl);
        totalSize += parseInt(res.headers['content-length']) || 0;
      } catch (err) {
        // 忽略加载失败的资源
        continue;
      }
    }

    // 格式化输出结果
    function formatSize(bytes) {
      if (bytes < 1024) return `${bytes} B`;
      else if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
      else return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
    }

    console.log(`${url} 的总数据量：`, formatSize(totalSize));
  } catch (err) {
    console.log('请求失败：', err.message);
  }
}

// 调用示例：查询bbc.com的总数据量
getTotalPageSize('bbc.com');

3. 运行代码：

node sizeChecker.js

补充注意点 #

• 场景1的代码仅统计已加载的资源，若页面有懒加载内容，需等所有内容加载完成后再运行。
• 场景2的代码仅统计HTML中静态声明的资源，动态加载的内容（如JS里用fetch加载的资源）无法覆盖，如需更精准统计可使用Puppeteer模拟浏览器完整加载流程。
• 若资源没有返回content-length响应头，会用响应内容的字节数替代计算。

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