一是什么

FOUC即无样式内容闪烁，称为文档样式短暂失效，主要指HTML已加载而样式表并未加载，此后样式表再加载而产生的闪烁、花屏现象，

主要是因为引用css方法、位置不对，样式晚于结构加载，加载样式表时页面停止之前渲染，解析后重新渲染，导致出现的一些奇怪现象,

说白了就是重绘，导致了重新渲染

二：如果避免

1：样式表前置，根据渲染顺序将css嵌入在head头部中，同步加载

2：尽量使用<link>避免使用@import,@import需要等页面全部加载完毕，还可能导致性能问题(导致样式表文件逐个加载)

三：拓展：link和@import的区别

1：语法结构上,写法不同，@import一定要写在其他任何css规则之前，置于其他位置会被忽略，而且，如果存在其他样式，则@import之后的分号是必须书写

<link href=“./a.css” rel=“stylesheet” type=“text/css” />

@import './a/css';

2：加载顺序上=>link标签引入的css被同时加载；@import将在页面加载完毕后被加载

3：兼容性上=>@import在ie5+才能识别；link标签作为html元素，不存在兼容性问题

4：DOM可控性上=>可以通过插入link标签来改变样式，无法使用@import的方式插入样式

5：权重上=>link权重大于@import

6：关系上=>@import是css提供的语法规则，只有导入样式表的作用；link是html提供的标签，不仅可以加载css文件，还可以定义rss、rel连接属性等