白屏和无样式内容的闪烁

白屏现象源自于浏览器的行为。要知道我们的样式表在呈现页面时几乎用不到----它只影响发送E-mail消息时的DHTML特性。尽管Internet Explorer已经得到了所需的组件，它依然要等到样式表下载完毕之后再呈现它们。样式表在页面中的位置并不影响下载时间，但是会影响页面的呈现。

如果样式表仍在加载，构建呈现树就是一种浪费。因为在所有样式表加载并解析完毕之前无需绘制任何东西。否则，在其准备好之前显示内容会遇到FOUC（无样式内容的闪烁，Flash of Unstyled Content）问题。

文档为样式表使用了CSS规则，但是样式表被（不正确地）放在底部。当页面逐渐加载时，文字首先显示，然后是图片。最后，在样式表正确地下载并解析之后，已经呈现的文字和图片要用新的样式重绘了。这就是“无样式内容的闪烁”。应该避免这个问题。

白屏是浏览器在尝试修改前端工程师所犯的错误----将样式表放在文档比较靠后的位置。白屏是对FOUC问题的弥补。浏览器可以延迟呈现，直到所有的样式表都下载完之后，这就导致了白屏。反之，浏览器可以逐步呈现，但要承担闪烁的风险。这里没有完美的选择。

那么如何同时避免白屏和无样式内容的闪烁呢？

在“无样式内容的CSS闪烁”中，闪烁并不总是发生，它取决于你的浏览器以及如何加载页面。白屏仅当在新窗口中加载页面、重新加载和作为主页时在Internet Explorer中发生。在这些情况下，Internet Explorer选择了白屏，然而，如果你点击链接、使用书签或键入URL，Internet Explorer选择第二种方式----承担FOUC风险。

Firefox则是一致的----它总是选择第二种方式（FOUC），在Firefox中都表现一样，即它们会逐步呈现。

最佳的解决方案就是遵循HTML规范，将样式表放在顶部。两种情况----白屏和无样式内容的闪烁----都不再是风险。如果你的样式表不是呈现页面必需的。可以想办法在文档加载完毕后动态加载进来。否则，不管你的样式表在呈现页面时是否必需，都应该遵循：使用link标签将样式表放在文档head中。