Question

我一直在阅读很多关于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内执行，这在性能增益方面意味着什么，例如感知性能。用户是否觉得页面加载速度更快？

Answer 1

是不是domContentLoaded被$ .ready困住的同一事件？如果主页脚本以$ .ready运行时，网页测试的计时器花费的时间更长，那可能只是表明当时有更多线程在争夺资源。允许在该事件之前运行的任何设置和初始化都可以使文档就绪的所有设置运行更顺畅......

Answer 2

网页测试中的

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);

domContentLoaded时间在网页测试中意味着什么？

2 个答案: