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>