css的位置引起的ie下的“无样式内容的闪烁FOUC”，和非ie的“白屏”
我们都知道要将css放在head中，将js放在</body>前，但是为什么要这样？本文深入讲解为何要把css放在head中。
我先放了个google的css（不翻墙无法访问，模拟网络阻塞），然后第二个css是本地css，用于把一行文字变成红色。
<body>
<div id="my-id">
dsafdf
</div>
<!-- google css 无法获取的css文件，模拟阻塞 -->
<link rel="stylesheet" href="https://www.google.com.hk/search?q=dsaf&oq=dsaf&aqs=chrome..69i57j69i59l2.1401j0j8&sourceid=chrome&es_sm=122&ie=UTF-8">
<!-- 正常的本地css文件 -->
<link rel="stylesheet" href="css/style.css">
</body>style.css内容如下
div {
color: red;
}我们分别在ie、chrome、ff下测试会发现。
ie会立马显示”dsafdf”，然后过一会文字才会变成红色；
在chrome和ff下浏览器会有大概1s的白屏，然后文字会立马出现并且是红色的。
好了，我们可以看出ie和非ie浏览器对于渲染是有很大区别的，
ie会出现无样式内容的闪烁，非ie会白屏。
虽然ie能够提前展示没有css的文字信息，但是这样浪费brower资源：
如果样式表还在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解析完毕之前无需绘制任何东西。否则，在其准备好css之前显示内容会发生fouc的问题
623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
