Pure browser JS for calculating certain resource performance from client.

timing.js

function calculate_load_times() {
  // select running mode: log on/off
  var log = true;
  // input url pattern to detect
  var url_pattern = "http://ds.microsoft.com/api/";

  // Check performance support - TODO: crossbrowser test
  if (performance === undefined) {
    if(log) console.log("= Calculate Load Times: performance NOT supported");
    return;
  }
  // Get a list of "resource" performance entries
  var resources = performance.getEntriesByType("resource");
  if (resources === undefined || resources.length <= 0) {
    if(log) console.log("= Calculate Load Times: there are NO `resource` performance records");
    return;
  }
  // final data obj
  var data = {}; 
  var performanceTiming = window.performance.timing;
  if(log) console.log('PerformanceTiming:', performanceTiming);
  data.PerformanceTiming = performanceTiming;

  var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
  if(log) console.log('Page LoadTime :', loadTime);
  data.PageLoadingTime = loadTime;

  if(log) console.log("= Calculate Load Times");
  for (var i=0; i < resources.length; i++) {
     
    if(resources[i].name.startsWith(url_pattern)){
      if(log) console.log("== Resource[" + i + "] - " + resources[i].name);
      // Redirect time
      var t = resources[i].redirectEnd - resources[i].redirectStart;
      if(log) console.log("... Redirect time = " + t);
      
      // DNS time
      t = resources[i].domainLookupEnd - resources[i].domainLookupStart;
      if(log) console.log("... DNS lookup time = " + t);
      data.DNSLookupTime = t;

      // TCP handshake time
      t = resources[i].connectEnd - resources[i].connectStart;
      if(log) console.log("... TCP time = " + t);
      data.TCPHankshakeTime = t;

      // Secure connection time
      t = (resources[i].secureConnectionStart > 0) ? (resources[i].connectEnd - resources[i].secureConnectionStart) : "0";
      if(log) console.log("... Secure connection time = " + t);
      data.SecureConnectionTime = t;

      // Response time
      t = resources[i].responseEnd - resources[i].responseStart;
      if(log) console.log("... Response time = " + t);
      data.ResponseTime = t;

      // Fetch until response end
      t = (resources[i].fetchStart > 0) ? (resources[i].responseEnd - resources[i].fetchStart) : "0";
      if(log) console.log("... Fetch until response end time = " + t);
      data.FetchUntilResponseEndTime = t;

      // Request start until reponse end
      t = (resources[i].requestStart > 0) ? (resources[i].responseEnd - resources[i].requestStart) : "0";
      if(log) console.log("... Request start until response end time = " + t);

      // Start until reponse end
      t = (resources[i].startTime > 0) ? (resources[i].responseEnd - resources[i].startTime) : "0";
      if(log) console.log("... Start until response end time = " + t);
    }
    
  }
  //Ajax call to submit the result
  if(log) console.log("Submiting Data = ", data);
  submit(data);
}

function submit(data)
{
    var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function()
        {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
            {
                alert(xmlHttp.responseText);
            }
        }
        //Note: Make sure 'Access-Control-Allow-Origin' header is present on the requested resource, or set to * - TODO: cross origin post test.
        xmlHttp.open("post", "http://<your end point>/api/timing");  
        xmlHttp.setRequestHeader("Content-Type", "application/json");
        xmlHttp.send(data); 
}


calculate_load_times();

README:

1. You can turn on/off logs in browser by setting log flag. #Line3
2. You can update the url pattern you are looking for. #Line5
3. You can update the endpoint url or method to collect the data. #Line88
4. Copy and paste in browser console to test.

Output:
JSON Object: 'data'
i.e.
{
"PerformanceTiming":{
"navigationStart":1488410698553,
"unloadEventStart":0,
"unloadEventEnd":0,
"redirectStart":0,
"redirectEnd":0,
"fetchStart":1488410698643,
"domainLookupStart":1488410698643,
"domainLookupEnd":1488410698643,
"connectStart":1488410698643,
"connectEnd":1488410698643,
"secureConnectionStart":0,
"requestStart":1488410698656,
"responseStart":1488410698657,
"responseEnd":1488410698677,
"domLoading":1488410698663,
"domInteractive":1488410698716,
"domContentLoadedEventStart":1488410699310,
"domContentLoadedEventEnd":1488410699310,
"domComplete":1488410702267,
"loadEventStart":1488410702306,
"loadEventEnd":1488410702510
},
"PageLoadingTime":757,
"DNSLookupTime":0,
"TCPHankshakeTime":0,
"SecureConnectionTime":"0",
"ResponseTime":1942.5850000000003,
"FetchUntilResponseEndTime":95.6400000000001
}

Note: This version is designed for collecting one resource only. Easy to modify to collect multiple resources.

Btw, a ref to explain the calculation ->
https://msdn.microsoft.com/library/hh673552(v=vs.85).aspx