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

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

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

CSS应该在<head>定义。

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

Answer 3

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

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

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

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

问题描述

3 个解决方案

解决方案1
47 已采纳 2014-02-13 09:22:24

解决方案2
6 2011-11-07 07:10:53

解决方案3
1 2014-10-06 22:32:49

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

问题描述

3 个解决方案

解决方案1 47 已采纳 2014-02-13 09:22:24

解决方案2 6 2011-11-07 07:10:53

解决方案3 1 2014-10-06 22:32:49

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

解决方案1
47 已采纳 2014-02-13 09:22:24

解决方案2
6 2011-11-07 07:10:53

解决方案3
1 2014-10-06 22:32:49