13

我们经常在这里和那里读到，我们必须将我们的 js 代码放在页面头部部分或（抱歉）结束正文标记之前。除了关于这个的讨论，我只是想知道浏览器对这些东西的阅读顺序是什么（假设它们在这里是平等的）：

我们可以放置：

$(document).ready(function(){

无论页面结构的哪个位置，因为我们正在使用$(document).ready还是应该将它放在 head 部分？

任何人都可以澄清这一点。

如果我的问题不清楚，我可以改写。

4

5 回答 5

18

您可以将脚本放置在文档中的任何位置。最佳实践通常建议将脚本放在页脚中，以解决页面加载性能问题。此外，最佳实践通常建议将脚本放在一起以便于维护。

script但是，根据规范，您在文档中放置标签的位置没有限制。您可以将它们一起放在页眉、正文底部、散布在整个文档中，或者它们的任意组合。

jQuery 构造的使用$(document).ready具有相同的结果，无论它放在文档中的什么位置。关键是要了解这个构造背后的功能：

虽然 JavaScript 在页面呈现时提供了用于执行代码的加载事件，但在完全接收到所有资产（例如图像）之前，不会触发此事件。

所以，ready与 类似document.onload，但又不一样。代码在哪里并不重要，无论是在document.onload触发时执行还是在 jQuery 触发时执行ready。代码在文档中的位置只有在它没有被某些事件处理程序/侦听器包装时才有意义。

对位置的唯一限制$(document).ready是在包含 jQuery 库之前它不能发生。$(document).ready正在使用 jQuery，所以如果 jQuery 不存在......你不能使用它。

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
        <script>
            alert('executed as soon as it is reached (as the document is downloaded)');
            $(document).ready(function () { alert('on jQuery ready'); });
        </script>
    </head>
    <body onload="alert('executed on document.onload event');">
        <script>
            alert('executed as soon as it is reached (as the document is downloaded)');
            $(document).ready(function () { alert('on jQuery ready'); });
        </script>
    </body>
</html>

文档

于 2013-07-15T16:31:34.787 回答
2

AFAIK，$(document).ready在 DOM 完全加载后会引发事件，因此放置它的位置无关紧要。

但是他们说要在正文末尾编写脚本，因为页面会立即显示给最终用户，并且 javascript 将继续作为后台进程运行。

于 2013-07-15T16:31:47.110 回答
1

浏览器从上到下执行脚本，所以head部分的srcipt会先于body中的脚本执行。我更喜欢将脚本放在 html 代码的下面，但一般来说，如果您等待页面完全加载，这并不重要。

于 2013-07-15T16:35:48.773 回答
0

文档就绪函数会等到 DOM 加载完成后再运行。所以从技术上讲，你把它放在哪里并不重要。许多人喜欢将脚本放在头部，因为它可以确保在页面加载之前读取脚本。其他人喜欢把它放在最后（就在 end body 标记之前），这样页面的所有元素都会在脚本读取它们之前加载。但是由于您无论如何都在等待 DOM 加载，所以没关系。

如果您有一个小功能，那么我只会将文档准备功能放在头标签中。

于 2013-07-15T16:33:17.857 回答
0

据我所知，BKM 是将其放在页脚中（尽管大多数开发人员倾向于将其放在 head 标签中）。主要原因 - 大多数文档 DOM 在加载 JS 之前呈现给浏览器。

于 2013-07-15T16:34:27.110 回答