正如Andy所说，文档将是无效的，但是脚本仍然会被解释。请看WebKit的例子:

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;
    ...

正如Andy所说，文档将是无效的，但是脚本仍然会被解释。请看WebKit的例子:

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;
    ...

按照W3C推荐的过程，在“元素体”之后插入“元素脚本”是一个“解析错误”。在“树结构”中创建一个错误，并运行“再次标记”来处理该内容。这就像一个额外的步骤。只有这样，它才能运行“脚本执行”-见方案过程。

任何其他的都是“解析错误”。将“插入模式”切换为“主体内”并重新处理令牌。

从技术上讲，对于浏览器来说，如何标记和优化它是一个内部过程。

是的。但是，如果您确实在外部添加了代码，这很可能不会是世界末日，因为大多数浏览器都会修复它，但这仍然是一个不好的做法。

只有html元素的注释和结束标记被允许放在主体的结束标记之后。

您可以通过规范或验证器确认这一点。

浏览器可以执行错误恢复，HTML规范甚至描述了在这种情况下如何恢复，但您永远不应该依赖于此。

还值得注意的是，将脚本元素放在末尾的通常原因是确保脚本在运行之前可能试图通过DOM访问的元素已经存在。

随着defer属性的到来，我们可以将脚本放在头部，同时还可以让浏览器在下载HTML的同时下载JS，以获得更好的性能。

你可以像下面这样放置它，也可以放在head标签里面，但通常的做法是在</body>结尾之前命名一个注释以便稍后使用，然后打开一个<script>，将任何JS放在</script></body></html>里面。

    <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>

</html>