admin管理员组

文章数量:1402560

Is there a way in javascript to count the number of http request that a website does to a server? EXAMPLE: In my local webserver running with apache tomcat i have a simple html page helloworld.html with a style.css file, so when i type "localhost:8080/helloworld.html" the browser does two requests, one for helloworld.html and one for style.css.

My goal is to show this number on helloworld.html for a video element, when i play it start several number of http get to the webserver.

I'm trying for several days on the web but I have not found anything. I found webrequest api but i think that only chrome extension can use it. I found also chrome.devtoolswork API but i can use it only when chrome dev tools is opened.

Is there a way in javascript to count the number of http request that a website does to a server? EXAMPLE: In my local webserver running with apache tomcat i have a simple html page helloworld.html with a style.css file, so when i type "localhost:8080/helloworld.html" the browser does two requests, one for helloworld.html and one for style.css.

My goal is to show this number on helloworld.html for a video element, when i play it start several number of http get to the webserver.

I'm trying for several days on the web but I have not found anything. I found webrequest api but i think that only chrome extension can use it. I found also chrome.devtoolswork API but i can use it only when chrome dev tools is opened.

Share Improve this question edited Dec 3, 2014 at 15:23 david6630 asked Dec 3, 2014 at 15:15 david6630david6630 4691 gold badge5 silver badges9 bronze badges 4
  • 1 Surely the place to do this is one the server, it will log all requests – Alex K. Commented Dec 3, 2014 at 15:19
  • You're right but i want to show this number on my html page. – david6630 Commented Dec 3, 2014 at 15:22
  • 1 Even on the server it's tricky because you need to associate all the individual http requests with the one initial one. If you can do it server-side, you can then write the data to a file, then fetch that file from the client via ajax. – Bobby Jack Commented Dec 3, 2014 at 15:30
  • You are creating an extension to the Chrome? – Korvo Commented Dec 4, 2014 at 13:15
Add a ment  | 

2 Answers 2

Reset to default 5

With window.performance API provided by HTML5, there is an easy option to find out the total number of external resources loaded by the page.

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

There is no easy option like finding the individual details like images, css, scripts, etc., But still you can find those if all your resources URL are in some proper format like http://example./img/sample.jpg or http://example./scripts/app.js or http://example./styles/master.css

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

note: using _ for filtering. you can use without _. This method also have its own caveats like that it will return only successful requests. Pending resources won't be listed

You can count the <link> and <script> manually (for a simple page without ajax).

With 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++;
    }
});

This suppose you correctly use relative url. This won't give you any state for the responses (like 404 for instance). Note that indexOf is not working on IE8.

本文标签: tomcatCounting the number of http requests in javascriptStack Overflow