javascript 为什么在 body 标签末尾有脚本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30653081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why scripts at the end of body tag
提问by Artem Svirskyi
I know this question was asked many times, but I haven't found answer. So why its recommended to include scripts at the end of body tag for better rendering?
我知道这个问题被问了很多次，但我还没有找到答案。那么为什么建议在 body 标签的末尾包含脚本以获得更好的渲染呢？
From Udacity course https://www.udacity.com/course/ud884- rendering starts after DOM and CSSOM are ready. JS is HTML parse blocking and any script starts after CSSOM is ready.
来自 Udacity 课程https://www.udacity.com/course/ud884- DOM 和 CSSOM 准备就绪后开始渲染。JS 是 HTML 解析阻塞，任何脚本都在 CSSOM 准备好后启动。
So if we got:
所以如果我们得到：
<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 would be:
CRP 将是：
CSSOM ready > JS execute > DOM ready > Rendering
And if script is at head:
如果脚本在头：
<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 would be the same:
CRP 是一样的：
CSSOM ready > JS execute > DOM ready > Rendering
This question is only about "sync" scripts (without async/defer attribute).
这个问题仅与“同步”脚本有关（没有 async/defer 属性）。
回答by Sampson
Scripts, historically, blocked additional resources from being downloaded more quickly. By placing them at the bottom, your style, content, and media could download more quickly giving the perceptionof improved performance.
从历史上看，脚本会阻止其他资源更快地下载。通过将它们放置在底部，你的风格，内容和媒体可以下载更迅速地给予感知的改进性能。
回答by Katana314
In my opinion, this is an outdated practice. More recently, the preference is for JavaScript to separate any code that requires the DOM to be present into a "DOMContentLoaded" event listener. This isn't necessarily alllogic; lots of code can initialize without access to the complete DOM.
在我看来，这是一种过时的做法。最近，JavaScript 倾向于将需要 DOM 存在于“DOMContentLoaded”事件侦听器中的任何代码分开。这不一定是全部逻辑；许多代码可以在不访问完整 DOM 的情况下进行初始化。
It's true that this causes a small moment when only the script file is being retrieved, and nothing else (for instance, images). This small window can be skipped by adding the asyncattribute, but even without it I recommend putting script tags in the head so that the browser knows as soon as possible to load them, rather than saving them (and any future JS-initiated requests) for last.
确实，这会导致仅检索脚本文件而没有其他任何内容（例如图像）的一小段时间。这个小窗口可以通过添加async属性来跳过，但即使没有它，我也建议将脚本标签放在头部，以便浏览器尽快知道加载它们，而不是保存它们（以及任何未来的 JS 发起的请求）最后的。
回答by user4975367
I think it depends on your website or app. Some web apps are based on JavaScript. Then it does not make sense to include it at the bottom of the page, but load it immediately. If JavaScript just adds some not so important features to some content based page, then better load it at the end. Loading time will almost be the same, but the user will see the important parts earlier (before the page finished loading).
我认为这取决于您的网站或应用程序。一些网络应用程序基于 JavaScript。那么将它包含在页面底部是没有意义的，而是立即加载它。如果 JavaScript 只是向某些基于内容的页面添加了一些不那么重要的功能，那么最好在最后加载它。加载时间几乎相同，但用户会更早（在页面加载完成之前）看到重要的部分。
It's not about a whole site loading faster, but giving a user the impression of some website loading faster.
这不是关于整个网站加载速度更快，而是让用户感觉某些网站加载速度更快。
For example: This is why Ajax based websites can give a much faster impression. The interface is always the same. Just some content parts will alter.
例如：这就是为什么基于 Ajax 的网站可以给人更快的印象。界面总是一样的。只是一些内容部分会改变。
回答by Brian
Images placed below the script tag will wait to load until the JS script loads. By placing the script tag at the bottom you load images first, giving the appearance of a faster page load.
放置在脚本标签下方的图像将等待加载，直到 JS 脚本加载。通过将脚本标签放在底部，您可以先加载图像，从而使页面加载速度更快。
回答by DFeng
This was an extremely useful link.For any given webpage, a document object model is created from the .html. A CSS object model is also created from .css.
这是一个非常有用的链接。对于任何给定的网页，文档对象模型都是从 .html 创建的。CSS 对象模型也是从 .css 创建的。
We also know that JS files also modify objects. When the browser encounters a tag, the creation of DOM and CSS object models are immediately halted when the script is run because it can edit everything. As a result, if the js file needed to extract information from either of the trees (DOM and CSS object model), it would not have enough information.
我们也知道JS文件也会修改对象。当浏览器遇到标签时，脚本运行时会立即停止创建 DOM 和 CSS 对象模型，因为它可以编辑所有内容。结果，如果 js 文件需要从任一树（DOM 和 CSS 对象模型）中提取信息，它就没有足够的信息。
Therefore, script srces are generally at the end of the body where most of the trees have already been rendered.
因此，脚本源通常位于主体的末尾，其中大部分树已经被渲染。
