Javascript $（文档）.ready（函数（）{}）；vs脚本位于页面底部

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

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

---

无论是哪种方式，DOM本身都非常少，您可以对其进行操作（在阅读之前，我一直对此感到紧张）。如果您使用页面结束技巧，您的代码可能会被调用得非常快，但这并不重要。但更重要的是，这个选择与您将JavaScript链接到页面的位置有关

如果在

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

如果在
正文
元素的末尾包含
脚本
标记，则浏览器不会执行所有这些操作，直到页面基本上已经显示给用户为止。这将提高页面的感知加载时间

因此，为了获得最佳的感知加载时间，请将脚本放在页面底部。（这也是。）如果您要这样做，那么就没有必要使用
ready
，当然，如果您愿意，也可以使用

不过，这是有代价的：您需要确保用户可以看到的东西已经准备好与之交互。通过将下载时间移到页面大部分显示之后，可以增加用户在加载脚本之前开始与页面交互的可能性。这是将
script
标记置于末尾的计数器参数之一。通常情况下，这不是一个问题，但您必须查看您的页面，看看它是否是，如果是，您希望如何处理它。（您可以在
标题中放置一个小的内联
脚本
元素，用于设置文档范围内的事件处理程序来处理此问题。这样，您可以缩短加载时间，但是如果他们尝试过早地执行某项操作，您可以告诉他们，或者，更好的是，将他们想要执行的操作排队，并在您的完整script已准备就绪。）
通过将
$（document）.ready（）
脚本分散到整个DOM中（而不是全部在末尾），您的页面将加载得更慢，因为它需要先同步加载jQuery

$=jQuery
。因此，如果不先加载jQuery，就不能在脚本中使用
$
。这种方法迫使您在页面开始附近加载jQuery，这将在jQuery完全下载之前停止页面加载

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

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

+1。在加载js之前处理交互的另一种方法是使页面在没有javascript的情况下工作。确保所有链接都能正常工作，尽管它们当然会触发页面重新加载。然后用js劫持链接和其他东西，并添加ajax或其他工具：）如何处理排队操作？关于这一点，有没有一种设计模式或一些“通用解决方案”我可以研究一下？@HC_886;：你说的“排队一个动作”是什么意思？@T.J.Crowder，摘自你回答的最后一句话：“或者，更好的做法是，把他们想做的事情排队，在你的完整脚本准备好后再做。”我只是想知道，是否有“最佳”的方法来做这件事，因为我肯定我能想出“某种”方法来做这件事，但我肯定它会是。。。如果有人看过任何涉及的代码，我都会皱眉。@HC\ux：我从来没有觉得有必要这么做，也不知道有什么特别的标准。五年后，在我看来，最好还是用“对不起，正在加载，一秒钟…”来代替。（虽然如果加载速度太慢，你会遇到更大的问题。）如果我看到一些我认为可以点击的东西，然后点击它，什么都没有发生，天知道我下一步会点击什么。如果你把它们排成一列，然后在准备好的时候播放它们，可能会……不太理想。