Question

我知道这个问题被多次询问，但我没有找到答案。那么为什么建议在body标签的末尾包含脚本以便更好地渲染？

来自Udacity课程https://www.udacity.com/course/ud884 - 渲染在DOM和CSSOM准备好后开始。 JS是HTML解析阻塞，任何脚本在CSSOM准备好后启动。

所以，如果我们得到：

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>CRP</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <!-- content -->
        <script src="script.js"></script>
    </body>
</html>

CRP将是：

CSSOM ready > JS execute > DOM ready > Rendering

如果脚本在头部：

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>CRP</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <!-- content -->
    </body>
</html>

CRP将是相同的：

CSSOM ready > JS execute > DOM ready > Rendering

这个问题只是关于“同步”脚本（没有async / defer属性）。

Answer 1

历史上，脚本阻止了更多资源的下载速度。通过将它们置于底部，您的样式，内容和媒体可以更快地下载，从而提高感知的性能。

进一步阅读：async和defer属性。

Answer 2

在我看来，这是一种过时的做法。最近，首选项是JavaScript将需要DOM存在的任何代码分离到“DOMContentLoaded”事件侦听器中。这不一定是所有逻辑;很多代码都可以初始化而无需访问完整的DOM。

这确实会导致只检索脚本文件的小时刻，而没有其他内容（例如图像）。可以通过添加async属性来跳过这个小窗口，但即使没有它，我建议将脚本标记放在头部，以便浏览器尽快知道加载它们，而不是保存它们（以及任何未来的JS） - 最后的请求）。

Answer 3

<块引用>

最佳做法是将 JavaScript 标记放在结束标记，而不是在 HTML 部分。

这样做的原因是 HTML 从上到下加载。头部首先加载，然后是主体，然后是主体内部的所有内容。要是我们把我们的 JavaScript 链接放在 head 部分，整个 JavaScript 文件将在加载任何 HTML 之前加载，这可能会导致一些问题。

1.如果您的 JavaScript 中有代码会在 JavaScript 文件加载，实际上不会有任何 HTML 元素尚可对其产生影响，因此看起来好像 JavaScript 代码不起作用，您可能会收到错误消息。 2.如果你有很多 JavaScript，它会明显减慢你的页面加载速度因为它会在加载任何 JavaScript 之前加载所有 JavaScript HTML。当您将 JavaScript 链接放在 HTML 底部时 body，它让 HTML 有时间在任何 JavaScript 之前加载加载，可以防止错误并加快网站响应时间。

还有一件事：虽然最好在最后包含您的 Javascript 你的 HTML ，把你的 Javascript 放在你的 HTML 并不总是会导致错误。使用 jQuery 时，通常会将所有代码放在“文档就绪”函数中：

$("document").ready(function(){ // 你的代码在这里 });

这个函数基本上是说，不要运行里面的任何代码，直到文档已准备好或已完全加载。这将防止任何错误，但它仍然会减慢 HTML 的加载时间，这就是为什么最好在所有 HTML 之后包含脚本。

Answer 4

脚本标记下方的图像将等待加载，直到加载JS脚本。通过将脚本标记放在底部，首先加载图像，使页面加载速度更快。

Answer 5

我认为这取决于您的网站或应用。一些网络应用程序基于JavaScript。然后将它包含在页面底部没有意义，但立即加载它。如果JavaScript只是为某些基于内容的页面添加了一些不那么重要的功能，那么最好在最后加载它。加载时间几乎相同，但用户将在之前（页面加载完成之前）看到重要部分。

这不是关于整个网站加载速度更快，而是让用户更快地加载某些网站的印象。

例如：这就是为什么基于Ajax的网站可以给出更快的印象。界面始终相同。只是一些内容部分会改变。

Answer 6

This was an extremely useful link.对于任何给定的网页，都从.html创建文档对象模型。 CSS对象模型也是从.css创建的。

我们还知道JS文件也可以修改对象。当浏览器遇到标签时，运行脚本会立即停止DOM和CSS对象模型的创建，因为它可以编辑所有内容。结果，如果js文件需要从任意一棵树（DOM和CSS对象模型）中提取信息，那么它将没有足够的信息。

因此，脚本源通常位于已渲染大多数树的主体末端。

为什么脚本在body标签的末尾

6 个答案: