在javascript中计算http请求的数量答案

【问题标题】：Counting the number of http requests in javascript在javascript中计算http请求的数量
【发布时间】：2014-12-03 15:15:11
【问题描述】：

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

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

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

【问题讨论】：

肯定是服务器之一，它会记录所有请求
你说得对，但我想在我的 html 页面上显示这个数字。
即使在服务器上也很棘手，因为您需要将所有单独的 http 请求与一个初始请求相关联。如果您可以在服务器端进行，则可以将数据写入文件，然后通过 ajax 从客户端获取该文件。
您正在为 Chrome 创建扩展程序？

标签： javascript tomcat httprequest google-chrome-devtools

【解决方案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 或 @987654323），您仍然可以找到这些信息@

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

注意：使用 _ 进行过滤。你可以不使用_。这个方法也有它自己的警告，比如它只会返回成功的请求。将不会列出待处理的资源

【讨论】：

这个也很难，你能举个例子吗？

【解决方案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++;
    }
});

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

【讨论】：

我不明白你的回答与“OP”的问题有什么关系，可以更清楚吗？谢谢
他想统计一个页面向服务器发出的请求数。在一个简单的页面中，这是 1 + script 的数量和相对的 src + link 的数量和相对的 href。
OP 需要“javascript”中的解决方案（我的意思是使用 Chrome 开发工具），所以你的答案不是 OP 需要的。如果您对 OP 如何做到这一点有任何想法，请编辑您的答案。
您好，答案很好。一个问题，indexOf 不适用于 IE8？你确定吗？
您可以使用 polyfill 使其工作。你会找到一个here。