把<script>标签放在</body>标签之后是错误的吗?

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

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

当前回答

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

2013-08-22 05:31:55

其他回答

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

2012-02-15 14:21:45

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

2010-06-14 16:06:58

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

2013-08-22 05:31:55

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

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

如果脚本标记出现在正文或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>

2021-09-18 02:36:36

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

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

2013-07-24 22:20:59

把<script>标签放在</body>标签之后是错误的吗?

推荐文章

最新文章

标签