浏览器的白屏与无样式内容闪烁(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中 **