Javascript $(document).ready(function(){}); vs 页面底部的脚本

$(document).ready(function(){}); vs script at the bottom of page

提问by Sourav

what is the difference / advantage / disadvantage of writing script at the bottom of the page and writing the script in

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

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

回答by T.J. Crowder

Very little in and of itself, either way the DOM will be ready for you to operate on (I was nervous about that until I read this from Google). If you use the end of page trick, your code may get called the slightest, slightest bit sooner, but nothing that will matter. But more importantly, this choice relates to where you link your JavaScript into the page.

就其本身而言，无论哪种方式，DOM 都已准备好供您操作（我对此感到紧张，直到我从 Google读到这篇文章）。如果您使用页尾技巧，您的代码可能会被调用最轻微，最轻微的一点，但无关紧要。但更重要的是，此选择与您将 JavaScript 链接到页面的位置有关。

If you include your scripttag in the headand rely on ready, the browser encounters your scripttag before it displays anything to the user. In the normal course of events, the browser comes to a screeching halt and goes and downloads your script, fires up the JavaScript interpreter, and hands the script to it, then waits while the interpreter processes the script (and then jQuery watches in various ways for the DOM to be ready). (I say "in the normal course of things" because some browsers support the asyncor deferattributes on scripttags.)

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

If you include your scripttag at the end of the bodyelement, the browser doesn't do all of that until your page is largely already displayed to the user. This improves perceived load time for your page.

如果您script在body元素的末尾包含您的标签，则浏览器不会执行所有这些操作，直到您的页面大部分已经显示给用户。这可以改善页面的感知加载时间。

So to get the best perceived load time, put your script at the bottom of the page. (This is also the guideline from the Yahoo folks.) And if you're going to do that, then there's no need to use ready, though of course you could if you liked.

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

There's a price for that, though: You need to be sure that the things the user can see are ready to be interacted with. By moving the download time to after the page is largely displayed, you increase the possibility of the user starting to interact with the page before your script is loaded. That's one of the counter-arguments to putting the scripttag at the end. Frequently it's not an issue, but you have to look at your page to see whether it is and, if so, how you want to deal with it. (You can put a small inlinescriptelement in the headthat sets up a document-wide event handler to cope with this. That way, you get the improved load time but ifthey try to do something too early, you can either tell them that or, better, queue the thing they wanted to do and do it when your full script is ready.)

不过，这样做是有代价的：您需要确保用户可以看到的内容已准备好进行交互。通过将下载时间移到页面大部分显示之后，可以增加用户在脚本加载之前开始与页面交互的可能性。这是将script标签放在最后的反驳之一。通常这不是问题，但您必须查看您的页面，看看它是否是，如果是，您想如何处理它。（您可以在 中放置一个小的内联script元素head来设置文档范围的事件处理程序来处理这个问题。这样，您可以获得改进的加载时间，但是如果他们试图过早地做某事，您可以告诉他们，或者更好地将他们想做的事情排队，并在您的完整脚本准备就绪时执行。）

回答by Jake Wilson

Your page will load slower by scattering $(document).ready()scripts throughout the DOM (instead of all at the end) because it requires jQuery to be synchronouslyloaded first.

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

$ = jQuery. So you can't use $in your scripts without first loading jQuery. This approach forces you to load jQuery near the beginning of the page, which will halt your page loaduntil jQuery is fully downloaded.

$ = jQuery. 所以你不能$在没有首先加载 jQuery 的情况下在你的脚本中使用。这种方法强制您在页面开头附近加载 jQuery，这将停止您的页面加载，直到 jQuery 完全下载。

You cannot asyncload jQuery either because in many cases, your $(document).ready()script(s) will try to execute before jQuery is fully async loaded and cause an error, because again, $isn't defined yet.

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

That being said, there is a way to fool the system. Essentially setting $equal to a function that pushes $(document).ready()functions into a queue/array. Then at the bottom of the page, load jQuery then iterate through the queue and execute each $(document).ready()one at a time. This allows you to defer jQuery to the bottom of the page but still use $above it in the DOM. I personally haven't tested how well this works, but the theory is sound. The idea has been around for a while but I've very, very rarely seen it implemented. But it seems like a great idea:

话虽如此，有一种方法可以欺骗系统。本质上设置$等于将函数推$(document).ready()入队列/数组的函数。然后在页面底部，加载 jQuery，然后遍历队列并一次执行每个$(document).ready()。这允许您将 jQuery 推迟到页面底部，但仍然$在 DOM 中使用它。我个人还没有测试过它的效果如何，但这个理论是合理的。这个想法已经存在了一段时间，但我很少看到它被实施。但这似乎是一个好主意：

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

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