统计用户 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);
};
这两段代码分别拦截了 XMLHttpRequest
和 fetch
API 的请求,从而可以统计请求的总量。为了覆盖所有域名,代码没有对请求的 URL 进行筛选,但如果需要,可以通过分析 URL 来对请求进行分类统计。
方法 3: 服务端日志分析
如果你有权访问服务器日志,或者使用了像 Google Analytics 这样的分析工具,也可以通过分析服务端日志来统计 PV 过程中的请求数量。这种方法可能更适合统计对外部 API 的请求或者整体网站流量的分析。
方法选择建议
- 如果你想要实时在前端捕获和反馈统计数据,建议使用
Performance API
或者通过拦截网络请求的方法。 - 如果希望进行更全面的数据分析或长期趋势跟踪,服务端日志分析可能是更合适的选择。