页面渲染中的CSS阻塞问题探索

由于m.360zfw.com在google pagespeed的测试中 提示
E4559CD1-F22D-4222-92ED-E1784EE8A537
对于js阻塞,网上已经有很多文章,但是css缺比较少,于是对css阻塞进行深入研究。
写了一个测试demo,代码如下
<html>
<head>
 <style>
 div{background:red;width:200px;height:200px;}
 </style>
 <link rel="stylesheet" href="http://www.luoyongjie.cn/sleep.php">
</head>
<body>
 <div></div>
</body>
</html>
<?php
header("Content-type: text/css; charset=utf-8");
sleep(10);
$str = 'div{background:yellow}';
echo $str;
?>
运行demo呈现的想象是页面需要等待10秒才能打开,而且直接打开的是黄色方块。(证明css在页面中存在阻塞)
那么在我们设计页面的时候css,尽量将首屏显示的css直接放在html上面是最合适的,但是实际情况很难做到,比如一些导航的样式,未来在css文件中实现CDN,不得不将css放在外链中。