Question

我一直把样式表放在html的顶部（<head></head>之间）。据我所知，这是最好的做法。（例如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>

据我所知，目前为止，它应该是反过来的.. 可能还有其他因素我忽略了吗？

Answer 1

Google正在迅速破坏风格“归属”的传统。他们确实建议关键样式属于<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" />

Answer 2

应在<head>。

中定义CSS

这样，当元素加载到DOM中时，它们将使用适当的样式立即渲染。

Answer 3

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

因此，下次加载页面时，将使用缓存版本而不会出现速度问题。实际上，当用户首次加载页面时，可能会出现唯一的问题。

我将所有CSS放在它所属的<head>中。

Answer 4

冲突的信息可以在互联网上找到。

我强烈建议从今天开始，您可以使用以下方法将关键CSS放置为阻止CSS，然后将其余部分放置为非渲染阻止：

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

这将使用media参数作为none，这意味着它将根本不会加载，然后一旦加载的页面onload交换到all，从而强制它装载。

还可以在此处详细了解media属性： https://www.w3schools.com/tags/att_link_media.asp

顶部或底部的CSS样式表？或如何解决空白页问题？

4 个答案: