19

我一直将样式表放在<head></head>html 的顶部（之间）。据我了解，这是最佳做法。（例如http://stevesouders.com/hpws/css-bottom.php）

无论如何，最近我经历了不同的结果。相反，当 test.css 很慢时，下面的代码将返回空白页，这意味着我没有体验渐进式渲染。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
Blah..
</body>
</html>

然后将 test.css 放在底部时，我得到渐进式渲染。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
Blah..
<link rel="stylesheet" href="test.css" />
</body>
</html>

据我到目前为止所理解和坚持的，应该是相反的..可能还有其他我忽略的因素？

4

4 回答 4

50

谷歌正在迅速打破头脑中“归属”风格的传统。他们确实建议关键样式属于<head>标记甚至内联，但其他非必要样式应在结束</html>标记后引用。这确实适用于大多数（如果不是所有）现代浏览器（我还没有测试过所有）。

这背后的原因是将大部分样式加载为非阻塞引用，允许浏览器在获取所有（可能）庞大的样式之前开始写入页面。根据“关键”样式中的内容，这可能会导致在呈现样式（FOUC）之前出现可怕比例的初始布局。这可能就是您遇到的“空白页”问题。

还要记住，CSS 是在将近 20 年前（1996 年）发布的，因此 Google（和其他公司）操纵和推出概念的传统参数也就不足为奇了。

一个简单得可笑的例子：

<!DOCTYPE html>
<html>
<head>
    <title>It's a Brave New World</title>
    <link rel="stylesheet" type="text/css" href="css/critical_styles.css" />
</head>
<body>
    <!-- best page ever -->
</body>
</html>
<link rel="stylesheet" type="text/css" href="css/bulky_nonessential_styles.css" />
于 2014-02-13T09:22:24.877 回答
6

CSS 应该在你的<head>.

这样，当元素在 DOM 中加载时，它们将立即应用适当的样式进行渲染。

于 2011-11-07T07:10:53.197 回答
1

值得记住的是，当您的浏览器首次加载 CSS 文件时，它通常会对其进行缓存，尽管 Internet Explorer 不会缓存其他文件使用 @import 加载的 CSS 文件。

因此，下次加载页面时，使用缓存的版本没有速度问题。所以真的，唯一的问题可能发生在用户第一次加载页面时。

我把我所有的 CSS 放在<head>它所属的地方。

于 2014-10-06T22:32:49.857 回答
0

相互矛盾的信息可以在整个互联网上找到。

我强烈建议您从今天起只将关键 CSS 放置为阻塞 CSS，然后使用以下方法将其余的作为非渲染阻塞：

    <link rel="stylesheet" href="/path/to/css.css" media="none"  onload="if(media!='all')media='all'">

这将使用media参数 as none，这意味着它根本不会加载，然后一旦页面加载完毕就会onload交换，all从而强制它加载。

还可以在此处阅读有关媒体属性的更多信息： https ://www.w3schools.com/tags/att_link_media.asp

于 2019-10-17T09:17:31.143 回答