javascript - 页面加载完成后调用函数

Question

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

Answer 1

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

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

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

Data from the API really comes to life when events are used in combination:

• Network latency (): responseEnd-fetchStart.
• The time taken for page load once the page is received from the server: loadEventEnd-responseEnd.
• The whole process of navigation and page load: loadEventEnd-navigationStart.