Question

我正在使用Navigation timing object来计算导航开始和加载事件结束之间的整页延迟。

我的目标是在加载事件完成后获取performance.timing.loadEventEnd - performance.timing.navigationStart;。

但是，在load事件中调用此代码时，无法测量load event end。所以，我需要推迟它并在load事件之外运行。

以下是我的要求

在加载事件结束后调用myfunction。
我不想使用像setTimeout这样的计时功能。如果setTimeout保证在其他加载事件期间不会唤醒，则可以使用。
我不想计算load事件中的时间延迟。（比如在new Date().getTime()事件的顶部调用performance.now()或load，并在完成之前再次调用它并减去它。）因为我使用了一堆第三方库，它也调用了load事件。我无法处理所有这些。
应该跨浏览器环境工作，IE＆gt; = 10

$(window).ready(function(){
    console.log("domContentLoadedEventStart: "
        +performance.timing.domContentLoadedEventStart);
    console.log("domContentLoadedEventEnd: "
        +performance.timing.domContentLoadedEventEnd);
});
// result:
// > domContentLoadedEventStart: 1451979544555
// > domContentLoadedEventEnd: 0

$(window).load(function(){
    console.log("domcomplete: "+performance.timing.domComplete);
    console.log("loadEventStart: "+performance.timing.loadEventStart);
    console.log("loadEventEnd: "+performance.timing.loadEventEnd);
});
// result:
// > domcomplete: 1451979906417
// > loadEventStart: 1451979906417
// > loadEventEnd: 0

修改

我测试过这套房。此测试用例旨在在加载函数回调期间唤醒setTimeout。

// myfunction which will be called by setTimeout in firstLoadCallback.
function myfunction(){
    console.log("called myfunction");
}

// first load callback
$(window).load(function firstLoadCallback(){
    var startTicks = performance.now();

    // register myfunction with setTimeout
    setTimeout(myfunction, 0);

    // sleep +500ms
    while(performance.now() - startTicks < 500){
        ;
    }

    var diffTicks = performance.now() - startTicks;

    console.log("first ticks: "+diffTicks);
});

// second load callback
$(window).load(function secondLoadCallback(){
    var startTicks = performance.now();

    // sleep +500ms
    while(performance.now() - startTicks < 500){
        ;
    }

    var diffTicks = performance.now() - startTicks;

    console.log("second ticks: "+diffTicks);
});

// third callback from other file: other-file.js
$(window).load(function thirdLoadCallback(){
    var startTicks = performance.now();

    // sleep +500ms
    while(performance.now() - startTicks < 500){
        ;
    }

    var diffTicks = performance.now() - startTicks;

    console.log("third ticks: "+diffTicks);
});

// result:
// first ticks: 500.005
// second ticks: 500.0050000000001
// third ticks: 500.0049999999999
// called myfunction

根据此结果，setTimeout注册的回调在函数调用树结束之前不会被唤醒。如果这个结果保证了跨浏览器的工作，@ BenjaminGruenbaum的回答可能是正确的。

我会发布另一个关于它的问题。

Answer 1

除了嵌套load事件和setTimeout之外，你真的没有选择。

$(window).load(function(){ 
    setTimeout(function() { 
        // your above code goes here
    }, 0); // 0, since we just want it to defer.
});

// or without jQuery:
window.addEventListener("load", function() { // IE9+
    setTimeout(function() { 
        // your above code goes here
    }, 0); // 0, since we just want it to defer.
});

加载事件结束后调用函数

1 个答案: