for*_*own 17 css rendering progressive
我一直把样式表放在<head></head>html的顶部(之间).据我所知,这是最好的做法.(例如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>
据我所知,到目前为止,它应该是相反的方向.可能还有其他因素我忽略了？
Jon*_*osi 48
谷歌正在迅速破坏风格"归属"的传统.他们确实建议关键样式属于<head>标记或内联,但其他非必要样式应在结束</html>标记之后引用.这适用于大多数(如果不是全部)现代浏览器(我没有全部测试过).
这背后的原因是将大部分样式加载为非阻塞引用,允许浏览器在获得所有(可能)笨重的样式之前开始写入页面.根据"关键"样式中的内容,这可能会导致在呈现样式(FOUC)之前初始布置可怕的比例.这可能是您遇到"空白页"问题时遇到的问题.
还记得CSS大约在20年前(1996年)发布,所以谷歌(和其他人)正在操纵和推出概念的传统参数也就不足为奇了.
一个非常简单的例子:
<!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" />