$(Document).ready(.ready(){})；vs页面底部的脚本

Question

在页面底部编写脚本和在其中编写脚本有什么区别/优点/缺点

$(document).ready(function(){});

Answer 1

无论哪种方式，DOM本身都很少为您的操作做好准备(在阅读this from Google之前，我一直对此感到紧张)。如果你使用了结束页面的技巧，你的代码可能会被调用得最快、最快，但这并不重要。但更重要的是，这种选择与您将JavaScript链接到页面的位置有关。

如果您在head中包含script标记并依赖于ready，则浏览器在向用户显示任何内容之前会遇到您的script标记。在正常的事件过程中，浏览器会突然停止并下载您的脚本，启动JavaScript解释器，并将脚本交给它，然后等待解释器处理脚本(然后jQuery以各种方式监视DOM是否准备就绪)。(我说“在正常的过程中”是因为有些浏览器支持script标记上的async or defer属性。)

如果在body元素的末尾包含script标记，那么浏览器直到您的页面在很大程度上已经显示给用户时才会执行所有这些操作。这改善了页面的感知加载时间。

因此，为了获得最佳的加载时间，请将脚本放在页面的底部。(这也是the guideline from the Yahoo folks。)如果您要这样做，那么就不需要使用ready，当然，如果您喜欢的话，也可以使用。

然而，这是有代价的:你需要确保用户可以看到的东西已经准备好与之交互。通过将下载时间移到页面主要显示之后，可以增加用户在加载脚本之前开始与页面交互的可能性。这是将script标记放在末尾的一个相反的论点。这通常不是一个问题，但你必须查看你的页面，看看它是否是一个问题，如果是，你想如何处理它。(您可以在head中放置一个小的内联script元素，以设置一个文档范围的事件处理程序来处理此问题。这样，你可以获得更好的加载时间，但如果他们试图太早做某事，你可以告诉他们，或者，更好的是，将他们想做的事情排入队列，当你的完整脚本准备好时再做。)

Answer 2

通过在整个DOM中散布$(document).ready()脚本(而不是最后的所有脚本)，您的页面加载速度会变慢，因为它需要jQuery先同步加载。

$ = jQuery。因此，如果不先加载jQuery，就不能在脚本中使用$。这种方法迫使您在页面开头加载jQuery，这样将停止页面加载，直到jQuery完全下载完毕。

您也不能async load jQuery，因为在许多情况下，您的$(document).ready()脚本将尝试在jQuery完全异步加载之前执行并导致错误，因为$还没有定义。

这就是说，有一种方法可以愚弄系统。本质上是将$设置为将$(document).ready()函数推入队列/数组的函数。然后在页面底部加载jQuery，然后遍历队列并逐个执行每个$(document).ready()。这允许您将jQuery延迟到页面的底部，但仍然在DOM中使用页面上方的$。我个人没有测试过这个方法有多有效，但这个理论是合理的。这个想法已经存在了一段时间了，但我很少看到它被实现。但这似乎是一个很好的想法：

http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax