简单记录下FOUC问题

1、首先知道fouc是什么？

是指设置了样式的页面，在页面加时样式没有生效，在过了那么一瞬间有生效了，即文档样式短暂失效（Flash Of Unstyled Content）简称FOUC。

2. 产生 FOUC 的原因

1. 使用 import 方法导入样式表 。

2. 将样式表放在页面底部 。

3. 有几个样式表, 放在 html 结构的不同位置 。

3. 产生 FOUC 的原理

浏览器会首先加载整个HTML文档的DOM，然后再导入外部的CSS文件。因此样式表 'CSS' 晚于结构性 'html' 加载, 当加载到此样式表时, 页面将重新渲染之前的页面样式 'css' 。 此样式表被下载和解析后, 将重新渲染页面, 也就出现了短暂的花屏(屏幕闪烁)现象 。

4. 解决方法

1. 使用 link 标签将样式表放在文档 head 中 。

2. 在 .html 文件中, 将样式写在 style 标签中, 并且放置位置在 body 标签之上 。

1、使用linkl引入。

<link href="001.css" rel="stylesheet" type="text/css" />

2、使用@import 引入。

<style type="text/css">

@import url("001.css");

</style>