$（文件）。就绪（函数（）{}）; vs页面底部的脚本

Question

在页面底部编写脚本并编写脚本的区别/优点/缺点是什么？$(document).ready(function(){});

Answer 1

它本身很少，无论是哪种方式，DOM都可以让你操作（我很担心，直到我从谷歌读到这个）。如果你使用页面结尾技巧，你的代码可能会被称为最轻微，最轻微的一点，但没有什么是重要的。但更重要的是，此选择与将JavaScript链接到页面的位置有关。

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

如果script在body元素的末尾包含标记，则在您的页面基本上已经显示给用户之前，浏览器不会执行所有操作。这可以改善页面的感知加载时间。

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

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

Answer 2

在加载js之前处理交互的另一种方法是使页面无需javascript即可开始工作。确保所有链接都有效，尽管它们当然会触发页面重新加载。然后用js劫持链接和其他东西，并添加你的ajax或其他铃声和口哨:)