I have been putting stylesheets on top (between <head></head>) of html. As far as I understand this is the best practice. (e.g. http://stevesouders.com/hpws/css-bottom.php)
我一直把样式表放在html的顶部（在 之间）。据我所知，这是最好的做法。 （例如http://stevesouders.com/hpws/css-bottom.php）
Anyhow, recently I have experienced different results. Instead the codes below will return blank page when test.css is slow, which means I am not experiencing progressive rendering.
无论如何，最近我经历了不同的结果。相反，当test.css很慢时，下面的代码将返回空白页，这意味着我没有经历渐进式渲染。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
Blah..
</body>
</html>
Then when putting test.css at bottom, I get progressive rendering.
然后当test.css放在底部时，我得到渐进式渲染。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Blah..
<link rel="stylesheet" href="test.css" />
</body>
</html>
As far as I have understood and tought so far, it should be the other way round.. Probably there are other factors that I have overlooked?
到目前为止，我已经理解和应对了，反过来应该是另一回事。可能还有其他因素我忽略了？
3 个解决方案
#1
44
Google is fast busting the tradition of styles 'belonging' in the head. They do indeed recommend that critical styling belongs either in the <head> tag or even inline, but that other, non-essential styles should be referenced after the closing </html> tag. This does work on most, if not all modern browsers (I've not tested all).
谷歌正在迅速破坏风格“归属”的传统。他们确实建议关键样式属于标签或内联，但其他非必要样式应在结束 标记后引用。这适用于大多数（如果不是全部）现代浏览器（我没有全部测试过）。
The reason behind this is to load the bulk of the styles as a non-blocking reference, allowing the browser to begin writing to page before getting all the (potentially) bulky styles. Depending on what's in the 'critical' styles, this could cause an initial layout of hideous proportions before styling is rendered (FOUC). That is probably what you are experiencing with the "blank page" issue.
这背后的原因是将大部分样式加载为非阻塞引用，允许浏览器在获得所有（可能）笨重的样式之前开始写入页面。根据“关键”样式中的内容，这可能会导致在呈现样式（FOUC）之前初始布置可怕的比例。这可能是您遇到“空白页”问题时遇到的问题。
Remember also that CSS was released almost 20 years ago (1996), so it's not surprising that Google (and others) are manipulating and pushing out the traditional parameters of the concept.
还记得CSS近20年前（1996年）发布，所以谷歌（和其他人）正在操纵和推出概念的传统参数也就不足为奇了。
A ridiculously simple example:
一个非常简单的例子：
<!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" />
#2
6
CSS should be defined in your <head>.
CSS应该在中定义。
This way, as elements are loading in the DOM, they will render with the proper styles applied immediately.
这样，当元素加载到DOM中时，它们将使用立即应用的适当样式进行渲染。
#3
1
It is worth remembering that when your browser first loads a CSS file, it usually caches it, although Internet Explorer does not cache CSS files loaded by other files using @import.
值得记住的是，当您的浏览器首次加载CSS文件时，它通常会缓存它，尽管Internet Explorer不会使用@import缓存其他文件加载的CSS文件。
So next time around when a page is loaded, the cached version is used with no speed issues. So really, the only issue might occur when a user first loads the page.
因此，下次加载页面时，将使用缓存版本而不会出现速度问题。实际上，当用户首次加载页面时，可能会出现唯一的问题。
I put all my CSS in the <head> where it belongs.
我将所有CSS放在它所属的中。
#1
44
Google is fast busting the tradition of styles 'belonging' in the head. They do indeed recommend that critical styling belongs either in the <head> tag or even inline, but that other, non-essential styles should be referenced after the closing </html> tag. This does work on most, if not all modern browsers (I've not tested all).
谷歌正在迅速破坏风格“归属”的传统。他们确实建议关键样式属于标签或内联，但其他非必要样式应在结束 标记后引用。这适用于大多数（如果不是全部）现代浏览器（我没有全部测试过）。
The reason behind this is to load the bulk of the styles as a non-blocking reference, allowing the browser to begin writing to page before getting all the (potentially) bulky styles. Depending on what's in the 'critical' styles, this could cause an initial layout of hideous proportions before styling is rendered (FOUC). That is probably what you are experiencing with the "blank page" issue.
这背后的原因是将大部分样式加载为非阻塞引用，允许浏览器在获得所有（可能）笨重的样式之前开始写入页面。根据“关键”样式中的内容，这可能会导致在呈现样式（FOUC）之前初始布置可怕的比例。这可能是您遇到“空白页”问题时遇到的问题。
Remember also that CSS was released almost 20 years ago (1996), so it's not surprising that Google (and others) are manipulating and pushing out the traditional parameters of the concept.
还记得CSS近20年前（1996年）发布，所以谷歌（和其他人）正在操纵和推出概念的传统参数也就不足为奇了。
A ridiculously simple example:
一个非常简单的例子：
<!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" />
#2
6
CSS should be defined in your <head>.
CSS应该在中定义。
This way, as elements are loading in the DOM, they will render with the proper styles applied immediately.
这样，当元素加载到DOM中时，它们将使用立即应用的适当样式进行渲染。
#3
1
It is worth remembering that when your browser first loads a CSS file, it usually caches it, although Internet Explorer does not cache CSS files loaded by other files using @import.
值得记住的是，当您的浏览器首次加载CSS文件时，它通常会缓存它，尽管Internet Explorer不会使用@import缓存其他文件加载的CSS文件。
So next time around when a page is loaded, the cached version is used with no speed issues. So really, the only issue might occur when a user first loads the page.
因此，下次加载页面时，将使用缓存版本而不会出现速度问题。实际上，当用户首次加载页面时，可能会出现唯一的问题。
I put all my CSS in the <head> where it belongs.
我将所有CSS放在它所属的中。