如何获取完整页面加载的传输大小？

Question

使用 Selenium 或 JavaScript 如何获得（通过网络）传输的大小（字节）加载页面，包括所有内容、图像、CSS、JS 等？

首选大小是通过网络传输的大小，即压缩后的大小，仅用于发出的请求等。

这是您通常可以在开发工具中看到的内容，位于网络状态栏的右侧：

 

如果这是不可能的，是否可以获取所有加载资源的总大小（没有压缩等）？这将是一个可以接受的替代方案。

浏览器是 Firefox，但如果可以使用其他一些与 Selenium 兼容的浏览器来完成，那也是可以接受的。

 

我想这可以使用 proxy 来完成，但是有没有 JS 或 Selenium 方法来获取此类信息？

如果代理是唯一的方法，那么应该使用（或实现）哪种方法来使此类任务变得简单？在设置驱动程序之前只用 Java 实现一些东西？

（该解决方案至少应该在 Linux 上工作，但最好也能在 Windows 上工作。我通过 Java 使用 Selenium WebDriver。）

Answer 1

为了将来参考，可以通过 JavaScript 从浏览器请求此信息。然而，在撰写本文时，还没有浏览器支持此特定数据的此功能。 更多信息可以在这里找到。

同时，对于 Chrome，您可以从性能日志中解析此信息。

    //Enable performance logging
    LoggingPreferences logPrefs = new LoggingPreferences();
    logPrefs.enable(LogType.PERFORMANCE, Level.ALL);
    capa.setCapability(CapabilityType.LOGGING_PREFS, logPrefs);

    //Start driver
    WebDriver driver = new ChromeDriver(capa);

然后你可以像这样获取这些数据

for (LogEntry entry : driver.manage().logs().get(LogType.PERFORMANCE)) {
        if(entry.getMessage().contains("Network.dataReceived")) {
            Matcher dataLengthMatcher = Pattern.compile("encodedDataLength\":(.*?),").matcher(entry.getMessage());
            dataLengthMatcher.find();
            //Do whatever you want with the data here.
        }

如果像您的情况一样，您想了解单个页面加载的具体信息，您可以使用加载前和加载后时间戳，并且仅获取该时间范围内的条目。

Answer 2

Hakello 的答案中提到的性能 API 现在得到了很好的支持（除了 IE 和 Safari 之外），并且使用起来很简单：

return performance
  .getEntriesByType("resource")
  .map((x) => x.transferSize)
  .reduce((a, b) => (a + b), 0);

您可以使用

executeScript

运行该脚本来获取自上次导航事件以来下载的字节数。无需设置或配置。

Answer 3

是的，您可以使用 BrowserMobProxy 来做到这一点。这是一个 java jar，它使用 selenium 代理来跟踪客户端的网络流量。 例如页面加载时间、不同服务的查询字符串等。 你可以得到它 bmp.lightbody.net 。此 api 将创建 .har 文件，其中包含 json 格式的所有这些信息，您可以使用以下命令读取这些信息 在线工具 http://www.softwareishard.com/har/viewer/

Answer 4

我已经用Python实现了这一点，这可能会节省人们一些时间。设置日志记录：

logging_prefs = {'performance' : 'INFO'}    
caps = DesiredCapabilities.CHROME.copy()
caps['loggingPrefs'] = logging_prefs
driver = webdriver.Chrome(desired_capabilities=caps)

计算总数：

total_bytes = []
for entry in driver.get_log('performance'):
        if "Network.dataReceived" in str(entry):
            r = re.search(r'encodedDataLength\":(.*?),', str(entry))
            total_bytes.append(int(r.group(1)))
            mb = round((float(sum(total_bytes) / 1000) / 1000), 2)

Answer 5

我找到了解决方案（chrome + firefox）：

const entry = performance.getEntriesByType("navigation")
  .find(({ name }) => name === location.href);

  var pageSizeLength = entry.decodedBodySize;
  console.log(pageSizeLength);