在页面底部编写脚本和在其中编写脚本有什么区别/优点/缺点
$(document).ready(function(){});
$(document).ready(function(){}); vs 页面底部的脚本
IT技术
javascript
jquery
2021-01-27 18:57:35
2个回答
就其本身而言，无论哪种方式，DOM 都已准备好供您操作（我对此感到紧张，直到我从 Google读到这篇文章）。如果您使用页尾技巧，您的代码可能会被调用最轻微、最轻微的一点，但这无关紧要。但更重要的是，此选择与您将 JavaScript 链接到页面的位置有关。
如果您在 中包含您的script标签head并依赖于ready，浏览器会script在向用户显示任何内容之前遇到您的标签。在正常的事件过程中，浏览器突然停止并下载您的脚本，启动 JavaScript 解释器，并将脚本交给它，然后等待解释器处理脚本（然后 jQuery 以各种方式观察DOM 准备就绪）。（我说“在正常情况下”是因为有些浏览器支持标签上的async或defer属性script。）
如果您script在body元素的末尾包含您的标记，则浏览器不会执行所有这些操作，直到您的页面大部分已经显示给用户。这可以改善页面的感知加载时间。
因此，为了获得最佳感知加载时间，请将您的脚本放在页面底部。（这也是雅虎人的指导方针。）如果你打算这样做，那么就没有必要使用ready，当然，如果你愿意，你可以使用。
但是，这样做是有代价的：您需要确保用户可以看到的内容已准备好进行交互。通过将下载时间移到页面大部分显示之后，您可以增加用户在加载脚本之前开始与页面交互的可能性。这是将script标签放在最后的反驳之一。通常这不是问题，但您必须查看您的页面，看看它是否是，如果是，您想如何处理它。（您可以在 中放置一个小的内联 script元素head来设置文档范围的事件处理程序来处理这个问题。这样，您可以获得改进的加载时间，但是如果 他们试图过早地做某事，您可以告诉他们，或者更好地将他们想做的事情排队，并在您的完整脚本准备就绪时执行。）
通过$(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