Question

Google PageSpeed Insights建议我们在关闭</html>标记后放置辅助样式表。该页面的代码示例：

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="deferred_stylesheet.css">

这让我很奇怪，因为我希望Google推荐标准做法，而不是非标准做法。

上面的代码是否合法？ HTML5标准是否为浏览器提供了解析这些代码的一致规则？

如果我们这样使用标签，我们会遇到什么问题（或我们的用户实际上）遇到？

Answer 1

将放在HTML标记之外，不是正确但是所有浏览器都会尝试对它们所服务的混乱进行排序。

几乎所有浏览器，例如Firefox，谷歌浏览器，Internet Explorer等将为您排序。一些自编的浏览器可能不会这样做。

但是你可以在 head 标签之间更好地写它以获得性能（因为那时浏览器不需要理清脏代码）。

这意味着用户几乎不会遇到任何问题。

Answer 2

首先，您在顶部错过了<!DOCTYPE html>声明，这是HTML5文档所必需的。

其次，您还错过了一个<title>标签。

最后，不允许在结束</html>标记之后使用标记。如果您通过w3 validator service运行文档，则会看到：

第14行，第54栏：迷路开始标记链接。

<link rel="stylesheet" href="deferred_stylesheet.css">

此错误无法恢复。

我希望面对浏览器完全忽略它或加载它。取决于浏览器，版本和平台。既然你无法确定它是否有效（并且因为它不符合要求），你就不应该这样做。

<强>更新

这是无效的HTML，但是user-agents are allowed to parse it and include in the body。但他们不需要，因为他们可以为parse errors

定义自己的规则

Answer 3

这是正确的，甚至是允许的结构吗？
不。将元素放在<html>标记之外是不正确的。

哦亲爱的！它会让我陷入困境吗？
不会。浏览器会尽可能地修复您的错误代码。这对浏览器来说没有问题。

我应该这样做吗？
嗯......这很复杂。简短的回答是＆＃34;不，可能不是＆＃34;。作为开发人员，我们有责任确保我们的代码是正确的（机器不可信，这将是我们的垮台！）。规则是有原因的。另一方面，作为黑客，如果在这种情况下有意义并且你知道结果会是什么，我们有时可能会破坏和修改规则。

HTML黑客攻击？你到底在说什么？
浏览器将始终尝试尽可能最好地呈现文档。有趣的是，您甚至不必提供<html>标记 - 浏览器会为您解决这个问题。

这里是example page - 检查渲染的DOM和视图源。我几乎没有给它任何可以使用的东西，并且它创造了所有缺失的标签。整齐！您需要DOCTYPE声明，并且大多数情况下需要<title>标记。

但是，我离题了......

因此，浏览器肯定会正确呈现它。但是，根据规范，它是不正确的，文档将不会验证（如果你关心的话）。在大多数情况下，除非你有充分的理由，否则遵循规范是一个好主意。

现在，我无法理解为什么Google希望您将其置于<html>标记之外。这听起来很奇怪，但我猜他们知道他们在做什么。我的猜测是，他们想要绝对确定，最后加载了ressource。

元素出现后是合法的吗？

3 个答案: