CSS 样式表在顶部还是底部？或如何解决空白页问题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8033622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS stylesheets at top or bottom? or How to solve blank page issue?
提问by forestclown
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)
我一直将样式表放在<head></head>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?
到目前为止，据我了解和思考，它应该是相反的。可能还有其他因素我忽略了？
回答by Jongosi
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).
谷歌正在迅速打破头脑中“归属”风格的传统。他们确实建议关键样式属于<head>标签甚至内联，但其他非必要样式应在结束</html>标签之后引用。这确实适用于大多数（如果不是所有）现代浏览器（我还没有测试过所有浏览器）。
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 年）发布的，因此 Google（和其他公司）操纵和推出该概念的传统参数也就不足为奇了。
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" />
回答by ma?ek
CSS should be defined in your <head>.
CSS 应该在你的<head>.
This way, as elements are loading in the DOM, they will render with the proper styles applied immediately.
这样，当元素在 DOM 中加载时，它们将立即应用正确的样式进行渲染。
回答by JG Estiot
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 放在<head>它所属的地方。
回答by Steven Church
Conflicting information can be found all over the internet.
可以在互联网上找到相互矛盾的信息。
I would strongly suggest that as of today you place only critical CSS as blocking CSS and then the rest as non render blocking using the following method:
我强烈建议，从今天开始，您只将关键 CSS 放置为阻塞 CSS，然后使用以下方法将其余 CSS 放置为非渲染阻塞：
<link rel="stylesheet" href="/path/to/css.css" media="none" onload="if(media!='all')media='all'">
This will use the mediaparameter as nonewhich means it will not load at all, and then once the page as loaded onloadswap to allthus forcing it to load.
这将使用media参数 asnone这意味着它根本不会加载，然后一旦页面加载onload交换，all从而强制它加载。
Also read more up about the media attribute here: https://www.w3schools.com/tags/att_link_media.asp
还可以在此处阅读有关媒体属性的更多信息：https: //www.w3schools.com/tags/att_link_media.asp
