Prevent FOUC

gistfile1.html

<!-- Prevent FOUC (flash of unstyled content) - http://johnpolacek.com/2012/10/03/help-prevent-fouc/ -->
<style type="text/css">
    .no-fouc {display: none;}
</style>

<script type="text/javascript">
    document.documentElement.className = 'no-fouc';
    // add to document ready: $('.no-fouc').removeClass('no-fouc');
</script>

什么是 FOUC (文档样式短暂失效)?

如果使用 import 引入 CSS，会导致某些页面在 Windows Internet Explorer 出现一些奇怪的现象：无样式显示页面内容的瞬间闪烁（Flash of Unstyled Content），简称为 FOUC。

原因大致为：

• 使用import方法导入样式表。
• 将样式表放在页面底部
• 有几个样式表，放在html结构的不同位置。

其实原理：当样式表晚于结构性 HTML 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

解决方法：

• 不要使用 import；
• 将样式表使用 link 标签放在 head 中。