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

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

这个问题只是关于 "sync" 个脚本（没有 async/defer 属性）。

Answer 1

从历史上看，脚本会阻止其他资源更快地下载。通过将它们放在底部，您的样式、内容和媒体可以更快地下载，从而提供感觉改进的性能。

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

Answer 2

放置在脚本标签下方的图片将等待加载，直到 JS 脚本加载。通过将脚本标记放在底部，您可以先加载图像，从而使页面加载速度更快。

Answer 3

在我看来，这是一种过时的做法。最近，首选 JavaScript 将需要 DOM 的任何代码分离到 "DOMContentLoaded" 事件侦听器中。这不一定是 all 逻辑；许多代码可以在不访问完整 DOM.

的情况下进行初始化

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

Answer 4

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

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

例如：这就是为什么基于 Ajax 的网站可以给人更快的印象。界面总是一样的。只是部分内容会发生变化。

Answer 5

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

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

因此，脚本源通常在主体的末尾，那里已经渲染了大部分树木。

Answer 6

It is a best practice to put JavaScript tags just before the closing tag rather than in the section of your HTML.

The reason for this is that HTML loads from top to bottom. The head loads first, then the body, and then everything inside the body. If we put our JavaScript links in the head section, the entire JavaScript file will load before loading any of the HTML, which could cause a few problems.

1.If you have code in your JavaScript that alters HTML as soon as the JavaScript file loads, there won't actually be any HTML elements available for it to affect yet, so it will seem as though the JavaScript code isn't working, and you may get errors. 2.If you have a lot of JavaScript, it can visibly slow the loading of your page because it loads all of the JavaScript before it loads any of the HTML. When you place your JavaScript links at the bottom of your HTML body, it gives the HTML time to load before any of the JavaScript loads, which can prevent errors, and speed up website response time.

One more thing: While it is best to include your Javascript at the end of your HTML , putting your Javascript in the of your HTML doesn't ALWAYS cause errors. When using jQuery, it is common to put all of your code inside a "document ready" function:

$("document").ready(function(){ // your code here });

This function basically says, don't run any of the code inside until the document is ready, or fully loaded. This will prevent any errors, but it can still slow down the loading time of your HTML, which is why it is still best to include the script after all of the HTML.

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

Why scripts at the end of body tag

html

javascript

css

pageload

web