[css] 第18天 什么是FOUC？你是如何避免FOUC的？
haizhilin2013 opened this issue · 15 comments
第18天 什么是FOUC？你是如何避免FOUC的？
font-display
简单来说就是使用当文档结构表（HTML）先于样式表（CSS）渲染，这时候渲染出来的是没有样式的页面，然后当浏览器解析到样式表的时候，又结合样式表重新渲染了一遍文档，这时候页面就添加了样式，而前后两次的页面变换会出现一瞬间的闪烁。
解决办法也很简单，就是确保样式表最先渲染即可，比如css样式表添加到head标签中。
FOUC 即 Flash of Unstyled Content，是指页面一开始以样式 A（或无样式）的渲染，突然变成样式B。
原因是样式表的晚于 HTML 加载导致页面重新进行绘制。
- 通过
@import方式导入样式表 - style 标签在 body 中
解决方法：把 link 标签将样式放在 head 中
参考文档:什么是 FOUC？如何避免 FOUC？
前面有一个问题就是关于style放在head中和放在body中有什么区别
cssdom和htmldom是并行的，如果cssdom放在了body中会影响htmldom，从而导致html页面重新绘制，可能会白屏情况
html结构加载完成后再加载css样式表，当网速慢的时候会出现闪烁，用@import导入样式文件会出现这种情况，解决方法是用link导入样式文件，在加载html时同步加载样式
第一次听，敲一遍增加记忆， FOUC 指的是先展示节点，css 后加载，原因是 采用了 @import 活着 style放在 body中，解决方案 使用 link 链接css 并放在head中。优先加载
FOUC：加载时样式突然变化
原因：由于在渲染HTML时，遇到CSS样式表会重新渲染HTML
样式表没有放到head里面
使用了@import导入样式
解决：尽量把样式表放到body标签上面
我不喜欢这类的英文简写，我之前做过各类CAD的集成，CAD行业也会有很多简写，说实在的一般制造业公司内部也会有很多简写，真心记不住这些简写，而且好多简写会撞库，头大。
FOUC：样式表加载晚于html结构
解决办法：将样式表放到head里面
定义
如果使用import方法对css进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC
原因
当样式表晚于结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象，下列情况可能会出现：
- 使用import方法导入样式表
- 将样式表放在页面底部
- 有几个样式表，放在html结构的不同位置
解决办法
使用link标签将样式表放在文档head中
现在回头来看，一般不会问这种面试题了
FOUC:使用import方法对css进行导入，会导致某些页面在Windows下的Internet Explorer出现奇怪的现象：以无样式显示页面内容的瞬间闪烁，这种现象称为文档样式短暂失效
解决方法：使用link标签将样式表放入head中
FOUC（Flash of Unstyled Content）是指在网页加载过程中，由于样式表（CSS）加载延迟或未能及时应用，导致页面元素在加载完成之前以未样式化的形式显示出来的现象。
为了避免 FOUC，可以采取以下几种方法：
-
内联样式：将关键的 CSS 样式直接嵌入到 HTML 页面的
<head>标签内，以内联样式的形式呈现。这样可以确保样式在页面加载过程中立即生效，避免 FOUC。 -
样式表优化：优化样式表的加载和应用，使其尽早加载并在页面渲染之前应用。可以将样式表放在
<head>标签中，并使用适当的加载和缓存策略。 -
预加载样式表：使用预加载（preload）或异步加载（async）等技术，提前加载样式表文件，以确保在页面渲染之前已经下载并准备好样式。
-
隐藏内容：通过将页面的主要内容隐藏，直到样式表加载和应用完成，再将其显示出来。这可以使用 JavaScript 或 CSS 技术来实现。
-
FOUC 闪烁修复：使用 JavaScript 或 CSS 技术来处理 FOUC 闪烁问题，例如使用 JavaScript 监听 DOMContentLoaded 事件，在样式表加载完成后再将页面内容显示出来。
需要根据具体情况选择适合的方法来避免 FOUC。综合使用上述方法可以最大程度地减少 FOUC 的出现，并确保页面在加载过程中能够正确地呈现样式化的内容。