将脚本标签放在正文的结束标签（</body>）之后有多大的错误？
<html>
....
<body>
....
</body>
<script type="text/javascript" src="theJs.js"></script>
</html>
【问题讨论】：
标签： javascript html
【讨论】：
<script src="..." defer>，它适用于所有主流浏览器（尽管在 IE9 和更低版本中可能存在重大错误）。
是的。在正文的结束标记之后，只允许使用 cmets 和 html 元素的结束标记。
浏览器可能会执行错误恢复，但你不应该依赖它。
【讨论】：
作为Andy said，文档将无效，但脚本仍将被解释。例如，请参阅 WebKit 中的 the snippet：
void HTMLParser::processCloseTag(Token* t)
{
// Support for really broken HTML.
// we never close the body tag, since some stupid web pages close it before
// the actual end of the doc.
// let's rely on the end() call to close things.
if (t->tagName == htmlTag || t->tagName == bodyTag
|| t->tagName == commentAtom)
return;
...
【讨论】：
Internet Explorer 不再允许这样做（我相信是 version 10）并且会忽略此类脚本。
Firefox 和 Chrome 仍然可以容忍它们，但有可能有一天它们会将其作为非标准而放弃。
【讨论】：
在“元素主体”之后按程序插入“元素脚本”是recommended process by W3C 的“解析错误”。在“树构造”中创建一个错误并运行“再次标记化”以处理该内容。所以这就像一个额外的步骤。只有这样它才能运行“脚本执行”——参见the scheme process。
任何其他都是“解析错误”。将“插入模式”切换为“in body”，重新处理token。
从技术上讲，浏览器如何标记和优化它是一个内部过程。
【讨论】：
是的。但是如果你在外面添加代码，它很可能不会是世界末日，因为大多数浏览器都会修复它，但这仍然是一个不好的做法。
【讨论】：
从技术上讲，您不应该将脚本标签放在正文标签之后，因为页面内容的呈现以正文结束（或者它是头部？）
但是浏览器在某种程度上具有容错性（尽管我不会将此作为普遍真理，因为您可能永远不会知道）并且它们会：
为了安全起见，您可以：
此规范是公认的惯例/惯例，保证消除任何疑虑。
此外，当您安全并做最 [合理] 的事情时，请记住，您需要 [然后] 担心的是性能，因为内部/外部源文件的加载/下载、解析和解释(s) 取决于 script(s) 标签出现的位置，即使您使用的是 defer 或 async。
<!-- Moved (prepend) into the head -->
<script>console.log(1);
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Remains where it is -->
<script>
console.log(2);
</script>
<title>Document</title>
</head>
<body>
<h1>Content goes here</h1>
<!-- Remains where it is -->
<script>
console.log(3);
</script>
<h1>Content goes here</h1>
<!-- Remains where it is -->
<script>
console.log(4);
</script>
</body>
</html>
<!-- Moved (append) into the body -->
<script>
console.log(5);
</script>
【讨论】：
Google 实际上在“CSS 优化”方面建议这样做。他们建议内联关键的折叠样式并推迟其余样式（CSS 文件）。
例子：
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
【讨论】：
body 元素之外。那篇 Google 文章不建议任何人做任何此类事情。
<script>
window.addEventListener('DOMContentLoaded', event => {
// Activate Bootstrap scrollspy on the main nav element
const sideNav = document.body.querySelector('#sideNav');
if (sideNav) {
new bootstrap.ScrollSpy(document.body, {
target: '#sideNav',
offset: 74,
});
};
// Collapse responsive navbar when toggler is visible
const navbarToggler = document.body.querySelector('.navbar-toggler');
const responsiveNavItems = [].slice.call(
document.querySelectorAll('#navbarResponsive .nav-link')
);
responsiveNavItems.map(function (responsiveNavItem) {
responsiveNavItem.addEventListener('click', () => {
if (window.getComputedStyle(navbarToggler).display !== 'none') {
navbarToggler.click();
}
});
});
});
</script>
<!-- Bootstrap core JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>始终以 body 标记结束，并确保每个 JavaScript 部分都在 body 标记内。您也可以在 head 标记中包含链接或脚本，但不建议这样做，除非您确实确定您的 JavaScript 代码太大而无法内联。
【讨论】：
现代浏览器会像这样在正文中使用脚本标签：
<body>
<script src="scripts/main.js"></script>
</body>
基本上，这意味着脚本将在页面完成后加载，这在某些情况下（即 DOM 操作）可能很有用。但是，我强烈建议您使用相同的脚本并将其放在带有“defer”的头部标签中，因为它会产生相同的效果。
<head>
<script src="scripts/main.js" defer></script>
</head>
【讨论】：
script 标签有一个event 属性，可以定义该属性以确定何时解析脚本，这将很有用。所以你有event="load" event="DOMContentLoaded" 用于在创建DOM 后运行脚本或event="beforeunload" 在窗口beforeunload 事件上。例如，<script src="scripts/main.js" event="DOMContentLoaded"></script>。