Skip to main content

什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

解释​

FOUC(Flash Of Unstyled Content)--文档样式闪烁

换成代码来说就是

<style type="text/css" media="all">
    @import"../fouc.css";
</style>

而引用 CSS 文件的 @import 就是造成这个问题的罪魁祸首。IE 会先加载整个 HTML 文档的 DOM，然后再去导入外部的 CSS 文件，因此，在页面 DOM 加载完成到 CSS 导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。解决方法简单的出奇，只要在 <head> 之间加入一个 <link> 或者 <script> 元素就可以了。