0

我一直在阅读很多关于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 秒，大约是 0.1 秒~187ms。我是否正确假设执行时间下降是因为代码没有在内部执行jQuery.ready，这在性能增益方面意味着什么，例如感知性能。用户是否觉得页面加载更快？

4

2 回答 2

1

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

于 2015-08-01T05:59:07.963 回答
0

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);
于 2015-08-15T11:39:13.257 回答