IE11 中具有 iFrame 的页面的 Navigation Timing API 值不正确答案

【问题标题】：Incorrect values for Navigation Timing API in IE11 for pages with iFramesIE11 中具有 iFrame 的页面的 Navigation Timing API 值不正确
【发布时间】：2019-04-09 17:04:53
【问题描述】：

虽然通过Navigation Timing API的responseStart时间减去requestStart时间来计算服务器响应时间，但在IE11上多次接近0，这与服务器端的数据不匹配。这发生在带有 iframe 的页面上，这是一个已知问题还是有解决方法？

window.performance.timing.responseStart-window.performance.timing.requestStart

在 Chrome 上，结果更接近服务器端时间，但在 IE11 上则不然

【问题讨论】：

标签： internet-explorer-11 navigation-timing-api

【解决方案1】：

请确保请求页面包含足够的元素并花时间加载。然后，尝试清除缓存并刷新页面（也可以使用 Ctrl+F5 或Enable the F12 developer tools "Always refresh from server" option）。

您可以参考以下代码：

<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>

结果如下：

【讨论】：

我的问题是关于 IE11 在将应用程序部署到产品时使用 javascript 给出不正确的值，然后 javascript 通过分析信标发送数据，你提到的并没有真正给出任何不同的时间值相同的请求。