计算javascript中的http请求数

Question

javascript 有没有办法计算网站对服务器发出的 http 请求的数量？示例：在使用 apache tomcat 运行的本地网络服务器中，我有一个简单的 html 页面 helloworld.html 和 style.css 文件，因此当我输入“localhost:8080/helloworld.html”时，浏览器会执行两个请求，一个请求针对 helloworld.html一个用于 style.css。

我的目标是在 helloworld.html 上显示视频元素的这个数字，当我播放它时，会启动多个 http 访问网络服务器。

我在网上尝试了几天，但没有找到任何东西。我找到了 webrequest api 但我认为只有 chrome 扩展可以使用它。我还发现了 chrome.devtools.network API，但只有在打开 chrome 开发工具时才能使用它。

Answer 1

通过 HTML5 提供的 window.performance API，有一个简单的选项可以找出页面加载的外部资源的总数。

var totalNoOfResrouces = window.performance.getEntriesByType("resource").length;

没有像查找图像、CSS、脚本等个人详细信息那样简单的选择，但如果所有资源 URL 都采用某种正确的格式（例如http://example.com/img/sample.jpg ），您仍然可以找到这些信息或http://example.com/scripts/app.js或http://example.com/styles/master.css

_.filter(window.performance.getEntriesByType("resource"),function(a){ return a.name.indexOf("/img/") > 0 });

注意：使用 _ 进行过滤。您可以在没有 _ 的情况下使用。此方法也有其自己的注意事项，例如它只会返回成功的请求。待处理的资源不会列出

Answer 2

您可以手动计算<link>和<script>（对于没有ajax的简单页面）。

使用 JQuery：

var requestsNumber = 1; // The document itself.

$('link').each(function() {
    var href = $(this).attr('href');

    if (href && -1 === href.indexOf('http://')) {
        requestNumber++;
    }
});

$('script').each(function() {
    var src = $(this).attr('src');

    if (src && -1 === src.indexOf('http://')) {
        requestNumber++;
    }
});

假设您正确使用相对网址。这不会为您提供任何响应状态（例如 404）。请注意，该功能indexOf不适用于 IE8。