How does Glimpse calculate the timings for server, wire and client?

Question

Glimpse's HUD provides a very useful view of the timings -- and they seem to tie into the various browser's developer tooling for network capture.

If I take a simple implementation of a custom HttpModule as detailed here by Phil Haack, I get completely different server processing timing. The timings received are always far lower than that of which Glimpse reports. Glimpse however ties far closer into the browser tooling timings.

Glimpse is obviously using a far more sophisticated technique for calculating this.

• How does Glimpse calculate the duration for server processing times?
• How is the wire time accurately calculated?
• I imagine that the client timings are all based on listening to Javascript events. Is this correct?

Accidental

Answer 1

if you take a look at the glimpse.hud.js file, which is part of the glimpse.js client file that is sent over to the client, then you'll see that all timings are based on the Navigation Timing API implemented by the browser.

The timings shown by Glimpse in the HUD are calculated, based on timings provided by that API. So first Glimpse takes a hold on those timings

var timingsRaw = (window.performance 
               || window.mozPerformance 
               || window.msPerformance 
               || window.webkitPerformance 
               || {}).timing; 

After which it starts calculating timings that can provide some additional value on where to look for performance issues (is the problem on the server, on the client...)

processTimings = function (details) {
    var result = {},
        networkPre = calculateTimings('navigationStart', 'requestStart'),
        networkPost = calculateTimings('responseStart', 'responseEnd'),
        network = networkPre + networkPost,
        server = calculateTimings('requestStart', 'responseStart'),
        browser = calculateTimings('responseEnd', 'loadEventEnd'),
        total = network + server + browser;
    ...
};

calculateTimings = function (startIndex, finishIndex) {
    return timingsRaw[finishIndex] - timingsRaw[startIndex];
};

As you can see, this also applies to the timings shown for the server, which explains why your timings, which you effectively calculated on the server, are lower then the ones shown by Glimpse.

Note : Of course the way these timings are calculated only apply to those that are shown in the HUD on the HTTP tab. Timings shown in the Timeline tab for instance are calculated on the server, as they show timings between different processing steps on the server, which for obvious reasons can't be timed by the browser.

I hope this answers your question.

Harbard

Thanks! I was battling to see the trees from the forest. – Accidental