While Calculating the server response time by subtracting the requestStart time from responseStart time of the Navigation Timing API, the difference is close to 0 many times on IE11 and this doesn't match with the data from the server side. This happens on pages with iframes is this a known issue or is there a workaround for this?
window.performance.timing.responseStart-window.performance.timing.requestStart
on Chrome the results are closer to server side times but not on IE11
Please make sure the request page contains enough elements and spend time to load. Then, try to clear the cache and refresh the page (could also use Ctrl+F5 or Enable the F12 developer tools "Always refresh from server" option).
You could refer to the following code:
<body>
<a href="https://developer.telerik.com/featured/introduction-navigation-timing-api/">Go back to the article</a>
<h1>Navigation Timing API</h1>
<span id="nt-unsupported" class="hidden">API not supported</span>
<h2>Timing info</h2>
<ul id="timing-list"></ul>
<h2>Navigation info</h2>
<ul id="navigation-list"></ul>
<small class="author">
Demo created by <a href="https://www.audero.it">Aurelio De Rosa</a>
(<a href="https://twitter.com/AurelioDeRosa">@AurelioDeRosa</a>).<br />
This demo is part of the <a href="https://github.com/AurelioDeRosa/HTML5-API-demos">HTML5 API demos repository</a>.
</small>
<img src="Images/Image2.jpg" />
<img src="Images/Image1.jpg" />
<img src="Images/Image3.jpg" />
<img src="Images/Image2.jpg" />
<img src="Images/Image1.jpg" />
<img src="Images/Image3.jpg" />
<script>
if (!('performance' in window) ||
!('timing' in window.performance) ||
!('navigation' in window.performance)
) {
document.getElementById('nt-unsupported').className = '';
} else {
window.addEventListener('load', function () {
var list = '';
var timings = window.performance.timing;
for (var timing in timings) {
list += '<li>' + timing + ': <span class="value">' + timings[timing] + '</span></li>';
}
list += '<li>window.performance.timing.responseStart - window.performance.timing.requestStart : <span>' + (window.performance.timing.responseStart - window.performance.timing.requestStart) + '</span></li>';
document.getElementById('timing-list').innerHTML = list;
list = '';
list += '<li>redirectCount: <span class="value">' + window.performance.navigation['redirectCount'] + '</span></li>';
list += '<li>type: <span class="value">' + window.performance.navigation['type'] + '</span></li>';
document.getElementById('navigation-list').innerHTML = list;
});
}
</script>
</body>
the result as below:
