在弄清楚FOUC和白屏之前,先要弄清楚几种浏览器解析的方式
Chrome和Safari:当发现<link rel ="stylesheet"> 后立即停止渲染,在所有css加载完成之前页面上不会有任何内容
Firefox:<head>标签中的<link rel ="stylesheet">与Chrome和Safari中完全一致,这些link标签全部加载完之前,页面上不显示任何内容,而<body>中的内容则不阻塞任何内容显示,也就是说,放<body>内,先渲染没有样式的,再渲染有样式的。
IE/Edge:未加载完成的<link real="stylesheet">只阻塞其后面HTML内容显示,而对其前面的内容不影响。
所以,对于以webkit为内核的google,Safari浏览器来说 CSS放在页面哪个位置都一样
火狐 放head 先解析CSS 放body里面,边加载边渲染,这样就会出现闪屏(无样式内容闪烁,Fouc),这样,对于火狐浏览器来说,建议吧CSS文件放到<head>标签里
所以,综上所述,CSS文件要放到<head>标签内。
要将各浏览器对CSS的加载比喻成参加晚会,那
google浏览器 先解析css 解析完之后再开始给HTML渲染可以比喻成 先化妆再出门(急性子的姑娘总是把事情做好了才踏实)
优点:节约渲染时间
火狐:边解析变渲染则可以比喻成先出门然后在车上化妆(慢性子的姑娘,不急哈)