CSS样式表在顶部还是底部？或如何解决空白页问题？ [英] CSS stylesheets at top or bottom? or How to solve blank page issue?
问题描述
我一直在将样式表放在html的顶部（< head>< / head> ）之上。据我所知，这是最好的做法。 （例如 http://stevesouders.com/hpws/css-bottom.php ）
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)
无论如何，我最近经历了不同的结果。
当test.css慢时，下面的代码将返回空白页，这意味着我没有遇到渐进渲染。
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.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
Blah..
</body>
</html>
然后当把test.css放在底部时，
Then when putting test.css at bottom, I get progressive rendering.
<!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?
推荐答案
Google正快速打破了风格归属的传统头部。它们确实建议关键样式属于< head> 标记或甚至内联，但其他非基本样式应在关闭后引用< / html> 标记。这在大多数，如果不是所有的现代浏览器（我没有测试所有）。工作。
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.
还记得CSS是在20年前（1996年）发布的，所以Google并不奇怪Google （和其他人）正在操纵和推出概念的传统参数。
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.
一个可笑的简单例子：
<!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" />
这篇关于CSS样式表在顶部还是底部？或如何解决空白页问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
