【发布时间】：2011-08-26 23:11:37
【问题描述】：
在页面底部编写脚本和在页面底部编写脚本有什么区别/优点/缺点
$(document).ready(function(){});
【问题讨论】：
标签： javascript jquery
【发布时间】：2011-08-26 23:11:37
【问题描述】：
通过将$(document).ready() 脚本分散在整个 DOM 中（而不是最后全部），您的页面加载速度会变慢，因为它需要先同步加载 jQuery。
$ = jQuery。因此，如果不先加载 jQuery，就不能在脚本中使用 $。这种方法会强制您在页面开头附近加载 jQuery，这将停止页面加载，直到 jQuery 完全下载。
您也不能async 加载 jQuery，因为在许多情况下，您的 $(document).ready() 脚本会在 jQuery 完全异步加载之前尝试执行并导致错误，因为同样，$ 尚未定义.
话虽如此，有一种方法可以欺骗系统。本质上将$ 设置为等于将$(document).ready() 函数推入队列/数组的函数。然后在页面底部，加载 jQuery，然后遍历队列并一次执行每个$(document).ready()。这允许您将 jQuery 推迟到页面底部，但在 DOM 中仍然在其上方使用 $。我个人还没有测试过它的效果如何，但这个理论是合理的。这个想法已经存在了一段时间，但我很少看到它实施。但这似乎是个好主意：
http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax
【讨论】：
它本身非常少，无论哪种方式，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 中放置一个小的 inline script 元素，它会设置一个文档范围的事件处理程序来处理这个问题。这样，您可以获得改进的加载时间，但 如果他们尝试过早地做某事，您可以告诉他们，或者更好的是，将他们想做的事情排队，并在您的完整脚本准备好时执行。）
【讨论】：
-
+1。在加载 js 之前处理交互的另一种方法是让页面在没有 javascript 的情况下开始工作。确保所有链接都能正常工作，尽管它们当然会触发页面重新加载。然后用js劫持链接和其他东西，并添加你的ajax或其他花里胡哨:)
-
您将如何处理排队操作？有没有我可以研究的设计模式或一些“通用解决方案”？
-
@HC_：你所说的“排队行动”是什么意思？
-
@T.J.Crowder 您回答的最后一句话：“或者，更好的是，将他们想做的事情排队，并在您的完整脚本准备就绪时执行。”我只是想知道，是否有“最佳”方法可以做到这一点，因为我确信我可以找到“某种”方法，但我敢肯定，如果有其他人的话，它会……皱眉查看涉及的任何代码。
-
@HC_：我从来没有觉得有必要这样做，也不知道有什么特定的标准。五年后，在我看来，最好还是用“对不起，加载，一秒钟……”来代替。 （尽管如果加载的速度那么慢，那你的问题就更大了。）如果我看到一些我认为可以点击的东西，然后点击它，但没有任何反应，天知道我接下来会点击什么.如果您将它们排队，然后在准备好时播放它们，这可能......不太理想。