把<脚本>在</body>标签?

小开

最佳答案

它不会在<body>或<head>标记之外验证。它也不会有太大的区别——除非你在做DOM操作，可以在body元素完全加载之前打破即——把它放在结束</body>之前。

<html>
....
<body>
....
<script type="text/javascript" src="theJs.js"></script>
</body>
</html>

小开

只有超文本标记语言元素的注释和结束标记被允许放在body的结束标记之后。

你可以用该规范或一个验证器来确认这一点。

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

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

随着defer属性的到来，我们可以将script放在头中，并且仍然可以获得这个好处，同时还可以让浏览器与HTML并行下载JS以获得更好的性能。

小开

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

小开

作为安迪说，文档将是无效的，但脚本仍然会被解释。参见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;
...

小开

Internet Explorer不再允许这样做(我相信从版本10开始)，并将忽略这样的脚本。

Firefox和Chrome仍然容忍它们，但有可能有一天它们会将其作为非标准丢弃。

小开

谷歌实际上在“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>

看:优化CSS交付

小开

程序地插入一个“元素脚本”;在“元素体”之后;是“解析错误”;W3C推荐过程。在“树的构造”;创建一个错误并再次运行“tokenize”处理该内容。这就像一个额外的步骤。只有这样它才能运行“脚本执行”;-参见方案流程。

任何其他的都是“解析错误”。切换“插入模式”To“in body”;并重新处理令牌。

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

小开

现代浏览器会像这样在主体中接受脚本标签:

<body>
<!-- main body content -->
<script src="scripts/main.js"></script>
</body>

基本上，这意味着一旦页面完成，脚本就会被加载，这在某些情况下可能是有用的(即DOM操作)。但是，我强烈建议您使用相同的脚本，并将其放在头部标记“延迟”，因为它将产生类似的效果。

<head>
<script src="scripts/main.js" defer></script>
</head>

小开

你可以像下面这样放置它，也可以放在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>

小开

从技术上讲，您不应该将脚本标记放在主体标记之后，因为页面内容的呈现以主体结束(或者是头部?)

但是浏览器在某种程度上是容错的(尽管我不认为这是一个普遍的真理，因为你可能永远不会知道)，他们会:

如果脚本标记出现在正文或HTML标记之外，则将脚本标记移回正文标记。
如果脚本标记出现在文档声明之前，则将它移动到head标记中。
如果它出现在文档中出现的其他地方(按源代码顺序)，则保持原样。

为了安全起见，你可以:

使用推迟或异步属性和头部的script标记，或者
在结束主体标记之前使用脚本标记

此规范是公认的惯例，保证消除任何疑问。

另外，当你在安全的情况下做最合理的事情时，请记住你需要担心的是性能，因为内部/外部源文件的加载/下载、解析和解释依赖于脚本标记出现的位置，即使你使用的是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>