Clever Geek Handbook

How do I know what is executing when DOMContentLoaded is run in Javascript?

Is there a way to get all the code to run when the DOMContentLoaded starts, or the jQuery $ (document) .ready () function.

I am trying to optimize my site and through a speed test, I found that 2 seconds of page load time is wasted handling events when DOMContentLoaded is fired.

+3


source to share


3 answers


I highly recommend Chrome profiler for this task:



http://www.youtube.com/watch?v=OxW1dCjOstE

+2


source


Try the following:

console.log($(document).data("events").ready);

Based on post by John Resig here: http://forum.jquery.com/topic/list-event-listeners



Also, check out the plugin listHandlers

.

If all else fails, you can temporarily change the jQuery core file:

ready: function( fn ) {    
    //create a wrapper function so we can step into the debugger
    var fn2 = function() {
        var args = [].slice.call(arguments);
        debugger; // <-- start debugging each handler as it fires
        return fn.apply(this, args);
    }

    // Attach the listeners
    jQuery.bindReady();

    // Add the callback
    readyList.add( fn2 );

    return this;    
},
+1


source


According to the network bar information in the Chrome developer documentation , DomContentLoaded

disconnected as soon as the blue line appears. FWIW, load

shot as soon as the red line appears.

0


source






More articles:


All Articles