FOUC

Posted AutismTune

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了FOUC相关的知识,希望对你有一定的参考价值。

如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.原因大致为:
1,使用import方法导入样式表。
2,将样式表放在页面底部
3,有几个样式表,放在html结构的不同位置。其实原理很清楚:当样式表晚于 结构性html 加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂 的 花屏现象。解决方法:使用LINK标签将样式表放在文档HEAD

以上是关于FOUC的主要内容,如果未能解决你的问题,请参考以下文章

Web性能优化:FOUC

爱创课堂每日一题第四十九天- 什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?

18什么是FOUC?如何避免

防止Firefox中的fouc和ie

javascript 没有FOUC ES6级

scss bxslider-FOUC-prevention.scss