javascript - 在 Javascript 中触发 DOMContentLoaded 时，如何找出正在执行的内容？

Question

有没有办法获取在触发 DOMContentLoaded 或 jQuery 的 $(document).ready() 函数时将执行的所有代码。

我正在尝试优化我的网站，通过速度测试，我发现页面加载时间的 2 秒用于处理触发 DOMContentLoaded 时的事件。

Answer 1

我强烈推荐 Chrome profiler 来完成这个任务：

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

Answer 2

尝试这个：

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

基于 John Resig 的帖子：http: //forum.jquery.com/topic/list-event-listeners

另外，检查listHandlers插件。

如果一切都失败了，您可以临时编辑核心 jQuery 文件：

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;    
},

Answer 3

根据Chrome Developer Tools 文档中的网络面板信息，一旦DomContentLoaded出现蓝线，就会启动。FWIW，load一旦出现红线，就会启动。