我一直将样式表放在顶部（之间<head></head>）的html。据我了解，这是最佳实践。 （例如。http://stevesouders.com/hpws/css-bottom.php 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>
据我到目前为止的理解和理解，应该是相反的。
可能还有其他因素被我忽略了？
谷歌正在迅速打破头脑中“归属”风格的传统。他们确实建议关键样式属于<head>标签甚至内联，但其他非必要的样式应在结束后引用</html>标签。这确实适用于大多数（如果不是所有）现代浏览器（我没有测试所有）。
这背后的原因是将大部分样式加载为非阻塞引用，允许浏览器在获取所有（可能）庞大的样式之前开始写入页面。根据“关键”样式中的内容，这可能会导致在渲染样式之前出现比例丑陋的初始布局（）。这可能就是您遇到的“空白页”问题。
还请记住，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" />
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
