为什么我用Web性能API测量呈现时间的尝试总是产生负值?

Question

我正在构建一个基于Web的页面渲染基准应用程序，它使用Web性能API。它所做的基本上是测量浏览器在被命令呈现一堆div元素，然后构建一个隐藏表单，将计算结果放在那里，并将表单提交给另一个PHP页面进行处理时所花费的时间。问题是，计算结果一直是负的，并且在数万亿的范围内(即14位数:-1364403484035)。下面是代码:

window.onload=function(){
            results=(performance.timing.loadEventEnd-performance.timing.responseEnd);
            var browserData = document.createElement("form");
            browserData.setAttribute("method","post");
            browserData.setAttribute("action","results.php");
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", "res");
            hiddenField.setAttribute("value", results);
            browserData.appendChild(hiddenField);
            document.body.appendChild(browserData);
            browserData.submit();`

更新1:

我对我的代码做了一些调整，像这样:

 window.onload=function(){
        // My edits
        beginning=performance.timing.responseEnd;
        ending=performance.timing.loadEventEnd;
        results=(ending-beginning);
        // End of my edits
        var browserData = document.createElement("form");
        browserData.setAttribute("method","post");
        browserData.setAttribute("action","results.php");
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", "res");
        hiddenField.setAttribute("value", results);
        browserData.appendChild(hiddenField);
        document.body.appendChild(browserData);
        browserData.submit();`

使用浏览器的JavaScript控制台窥视变量的值，我发现ending = 0

Answer 1

原因

这是因为loaddeventend是在窗口时设置的。加载完成。您正在加载事件中调用它!

来自MSDN文档:

loaddeventend属性必须返回当前文档的加载事件完成的时间。当加载事件未触发或未完成时，它必须返回零。

如何修复:

使用setTimeout来结束onload。

window.onload = function () {
     window.setTimeout(function () {
         results = (performance.timing.loadEventEnd - performance.timing.responseEnd);
         var browserData = document.createElement("form");
         browserData.setAttribute("method", "post");
         browserData.setAttribute("action", "results.php");
         var hiddenField = document.createElement("input");
         hiddenField.setAttribute("type", "hidden");
         hiddenField.setAttribute("name", "res");
         hiddenField.setAttribute("value", results);
         browserData.appendChild(hiddenField);
         document.body.appendChild(browserData);
         browserData.submit();
     }, 0);
 }

另一个选项是轮询loadEventEnd，直到它不为零。

Answer 2

使用Boomerang (https://github.com/lognormal/boomerang)人生苦短，没时间写自己的导航计时库