白屏和fouc

浏览器的白屏与无样式内容闪烁（Flash of unstyled content）,是由于浏览器加载与显示页面方式不同造成的：
IE 会出现白屏现象，这是因为，其等待页面组件包括样式表全部加载完成后才呈现整个页面。若样式表放在页面底部，将会出现白屏。——样式表在页面中位置并不影响页面中组件的下载时间，但是会影响页面的呈现。
IE 为什么会这样做？David Hyatt给出了很好的解释：
如果样式表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解释完毕之前无需要绘制任何东西，否则，在其准备好之前显示的内容会遇到FOUC问题。
这样IE 就避免了FOUC问题，也就自然的会出现白屏现象。在IE中，将样式表放在文档底部公导致白屏问题的情形有以下几种：
一、在新窗口中打开时
二、重新加载时
三、作为主页打开时
FireFox 当把样式表放在页面底部时，会遇到FOUC问题，因为FF为了用户体验，对所有都是对页面中的组件逐步呈现。
此外，引入样式表时，有两种方式：link和@import
link: <link rel = "stylesheet" href = "styles1.css"> @import: <style type = "text/css"> @import url("styles1.css"); @import url("styles2.css"); ... ... </style>
一个style块可以包含多个@import规则，但@import规则必须放在所有其他规则之前。
使用@import规则需要注意的是：即便把@import规则放在文档的HEAD标签中，可能导致页面组件下载时的无序性，进而导致白屏（对于IE）和FOUC(对于FF)问题的产生。

为了很好的避免白屏和FOUC问题，请遵循以下规则：
** 使用LINK标签将样式表放在文档的HEAD中 **