在body的结束标记(</body>)之后放置脚本标记有多错误?

<html>
  ....
  <body>
     ....
  </body>
  <script type="text/javascript" src="theJs.js"></script>
</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;
    ...

其他回答

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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