webtest中的domContentLoaded时间是什么意思？答案

【问题标题】：What does the domContentLoaded time means in webpagetest?webtest中的domContentLoaded时间是什么意思？
【发布时间】：2015-07-30 22:31:13
【问题描述】：

我已经阅读了很多关于 jQuery.ready() 的内容，这会减慢您的页面速度。我的网站有一堆代码在 jQuery.ready() 内部运行，就像许多网站一样。

</body>
<script>
    jQuery(document).ready(function() {
         // Do some event binding and initialization. 
    });
</script>

我将此脚本放在<body> 标记的末尾，但为了安全起见，我将代码包裹在DOM ready 中。

现在我用http://www.webpagetest.org/ 测试我的页面，我注意到domContentLoaded 时间如下：

domContentLoaded
4.987s - 5.317s (0.330s)

现在我通过删除 jQuery.ready(function() {}); 来进行实验

</body>
<script>
// Do some event binding and initialization. 
</script>

然后我再次测试页面。结果如下。

domContentLoaded
3.772s - 3.915s (0.143s)

执行时间下降到只有 0.1 秒，大约是 ~187ms。我是否正确地假设执行时间下降是因为代码没有在 jQuery.ready 内部执行，这在性能增益方面意味着什么，例如感知性能。用户是否觉得页面加载更快？

【问题讨论】：

您是否在测试之间清除浏览器缓存？
是的，我点击了网页测试上的清除缓存选项。

标签： javascript jquery html performance webpagetest

【解决方案1】：

domContentLoaded 不是被 $.ready 捕获的同一个事件吗？如果当主脚本以 $.ready 运行时，webpagetest 的计时器花费的时间更长，这可能只是表明当时有更多线程正在竞争资源。有意义的是，允许在该事件之前运行的任何设置和初始化都会使在文档就绪时发生的所有设置运行更顺畅...

【讨论】：

这与我希望了解减少时间是否有助于提高感知性能的事件相同

【解决方案2】：

webtest 中的domContentLoaded 是jquery 中的document.ready

在 onLoad 事件上触发代码以提高性能

if("undefined"==typeof(addOnload)){function addOnload(a){if("undefined"!=typeof(window.attachEvent)){return window.attachEvent("onload",a)}else{if(window.addEventListener){return window.addEventListener("load",a,false)}}};}

在 onload 事件上调用你的函数

addOnload(fnName);

【讨论】：