在body的结束标记(</body>)之后放置脚本标记有多错误?
<html>
....
<body>
....
</body>
<script type="text/javascript" src="theJs.js"></script>
</html>
在body的结束标记(</body>)之后放置脚本标记有多错误?
<html>
....
<body>
....
</body>
<script type="text/javascript" src="theJs.js"></script>
</html>
当前回答
是的。但是,如果您确实在外部添加了代码,这很可能不会是世界末日,因为大多数浏览器都会修复它,但这仍然是一个不好的做法。
其他回答
从技术上讲,您不应该将脚本标记放在主体标记之后,因为页面内容的呈现以主体结束(或者是头部?)
但是浏览器在某种程度上是容错的(尽管我不认为这是一个普遍的真理,因为你可能永远不会知道),他们会:
如果脚本标记出现在正文或HTML标记之外,则将脚本标记移回正文标记。 如果脚本标记出现在文档声明之前,则将它移动到head标记中。 如果它出现在文档中出现的其他地方(按源代码顺序),则保持原样。
为了安全起见,你可以:
在头部的脚本标记中使用defer或async属性,或者 在结束主体标记之前使用脚本标记
此规范是公认的惯例,保证消除任何疑问。
另外,当你在安全的情况下做最合理的事情时,请记住你需要担心的是性能,因为内部/外部源文件的加载/下载、解析和解释依赖于脚本标记出现的位置,即使你使用的是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>
按照W3C推荐的过程,在“元素体”之后插入“元素脚本”是一个“解析错误”。在“树结构”中创建一个错误,并运行“再次标记”来处理该内容。这就像一个额外的步骤。只有这样,它才能运行“脚本执行”-见方案过程。
任何其他的都是“解析错误”。将“插入模式”切换为“主体内”并重新处理令牌。
从技术上讲,对于浏览器来说,如何标记和优化它是一个内部过程。
谷歌实际上在“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交付
它不会在<body>或<head>标记之外进行验证。把它放在</body>结束之前也不会有太大区别——除非你在做DOM操作,可能会在body元素完全加载之前破坏IE。
<html>
....
<body>
....
<script type="text/javascript" src="theJs.js"></script>
</body>
</html>
正如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;
...