如何统计用户 pv 访问的发起请求数量(所有域名的)【热度: 469】

统计用户 PV(页面访问量)期间发起的请求数量(涵盖所有域名)可以通过几种方法实现,包括使用浏览器的 Performance API、监听网络请求、或者通过服务端日志分析。每种方法有其优点和适用场景。下面是一些方法的简要说明和示例:

方法 1: 使用 Performance API

Performance API 提供了丰富的接口来访问和利用浏览器的性能数据。通过使用这个 API,可以获取到用户 PV 时所有资源请求的详细信息,包括请求的域名信息。

使用 PerformanceObserver 监听资源加载

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntriesByType("resource");
  console.log(`当前页面共发起了 ${entries.length} 个资源请求。`);
});
observer.observe({ entryTypes: ["resource"] });

这段代码会统计所有类型的资源加载(如图片、脚本、样式表等),不过它不会区别处理各个域名的请求。

方法 2: 监听所有网络请求 (XMLHttpRequest 和 Fetch API)

可以通过重新定义 XMLHttpRequest 和拦截 fetch API 的调用来监控所有通过这两种常见方法发起的网络请求。

拦截 XMLHttpRequest

(function () {
  let oldOpen = XMLHttpRequest.prototype.open;
  window.requestCount = 0;
  XMLHttpRequest.prototype.open = function () {
    window.requestCount++;
    console.log(`请求数量: ${window.requestCount}`);
    return oldOpen.apply(this, arguments);
  };
})();

拦截 Fetch API

let oldFetch = window.fetch;
window.fetch = function () {
  window.requestCount++;
  console.log(`请求数量: ${window.requestCount}`);
  return oldFetch.apply(this, arguments);
};

这两段代码分别拦截了 XMLHttpRequestfetch API 的请求,从而可以统计请求的总量。为了覆盖所有域名,代码没有对请求的 URL 进行筛选,但如果需要,可以通过分析 URL 来对请求进行分类统计。

方法 3: 服务端日志分析

如果你有权访问服务器日志,或者使用了像 Google Analytics 这样的分析工具,也可以通过分析服务端日志来统计 PV 过程中的请求数量。这种方法可能更适合统计对外部 API 的请求或者整体网站流量的分析。

方法选择建议

  • 如果你想要实时在前端捕获和反馈统计数据,建议使用Performance API或者通过拦截网络请求的方法。
  • 如果希望进行更全面的数据分析或长期趋势跟踪,服务端日志分析可能是更合适的选择。