Question

我在我的html页面中使用了javascript ..我一直在记录使用导航API所花费的时间。当我尝试找出总加载时间（navigationStart - loadEventEnd）时，我发现loadEventEnd为0。但是也发现loadEventStart值被记录了。我在window.onload = function（）{}里面的控制台上打印这些值。。从上面的统计数据我假设我的函数在load事件被触发之后和它完成之前被调用。但是使用onunload函数给我结果，结果无法查看，因为它在控制台中打印并且unload事件被触发离开页面时..请帮我找一个解决方案。

Answer 1

您很有可能获得0的值，因为您在页面完成加载之前打印了信息，请尝试以下代码段：

window.onload = function(){ setTimeout(function(){ var t = performance.timing; console.log(t.loadEventEnd - t.responseEnd); }, 0); }

这将确保在页面实际准备好后打印数字。从here获得了该片段。您可能会感兴趣的该页面中的其他信息：


当组合使用事件时，来自API的数据真正变为现实：


网络延迟（）：responseEnd-fetchStart。

从服务器收到页面后加载页面所需的时间：loadEventEnd-responseEnd。

整个导航和页面加载过程：loadEventEnd-navigationStart。

Answer 2

使用标记中的onload属性，如下所示： -

<body onload="methodName();">

请尝试以下示例以便更好地理解： -

<html>
<head>
    <script type="text/javascript">
        function test(){
            alert("hello");
        }
    </script>
</head>
<body onload="test();">
    <h5>Simple javascript test for page load</h5>
</body>
</html>

Answer 3

尝试以下方法。我希望它也能奏效...... 使用 window.onload 对象，如下所示： -

window.onload=function(){
                  //set of javascript statments...
              }

或者如果您有任何功能，请按如下方式使用window.onload： -

window.onload=function_name

请查看以下示例以更好地理解window.location

<html>
<head>
    <script type="text/javascript">
        window.onload = test;

        function test(){
            alert("hello");
        }
    </script>
</head>
<body>
    <h5>Simple javascript test for page load</h5>
</body>
</html>

完成页面加载后调用函数

3 个答案: