Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css] 第18天 什么是FOUC？你是如何避免FOUC的？ #59

Open
haizhilin2013 opened this issue May 3, 2019 · 15 comments
Open

[css] 第18天 什么是FOUC？你是如何避免FOUC的？ #59

haizhilin2013 opened this issue May 3, 2019 · 15 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第18天 什么是FOUC？你是如何避免FOUC的？
@haizhilin2013 haizhilin2013 added the css css label May 3, 2019
@tzjoke
Copy link

tzjoke commented May 29, 2019

font-display

@AricZhu
Copy link

AricZhu commented Jul 6, 2019

简单来说就是使用当文档结构表（HTML）先于样式表（CSS）渲染，这时候渲染出来的是没有样式的页面，然后当浏览器解析到样式表的时候，又结合样式表重新渲染了一遍文档，这时候页面就添加了样式，而前后两次的页面变换会出现一瞬间的闪烁。
解决办法也很简单，就是确保样式表最先渲染即可，比如css样式表添加到head标签中。

@Konata9
Copy link

Konata9 commented Jul 29, 2019

FOUC 即 Flash of Unstyled Content，是指页面一开始以样式 A（或无样式）的渲染，突然变成样式B。
原因是样式表的晚于 HTML 加载导致页面重新进行绘制。

  • 通过 @import 方式导入样式表
  • style 标签在 body 中

解决方法：把 link 标签将样式放在 head 中

参考文档:什么是 FOUC？如何避免 FOUC？

@seho-dev
Copy link

seho-dev commented Aug 3, 2019

前面有一个问题就是关于style放在head中和放在body中有什么区别
cssdom和htmldom是并行的，如果cssdom放在了body中会影响htmldom，从而导致html页面重新绘制，可能会白屏情况

@hc951221
Copy link

hc951221 commented Aug 7, 2019

html结构加载完成后再加载css样式表，当网速慢的时候会出现闪烁，用@import导入样式文件会出现这种情况，解决方法是用link导入样式文件，在加载html时同步加载样式

@zivenday zivenday mentioned this issue Aug 20, 2019
Open
@yyz841875845
Copy link

第一次听，敲一遍增加记忆， FOUC 指的是先展示节点，css 后加载，原因是 采用了 @import 活着 style放在 body中，解决方案 使用 link 链接css 并放在head中。优先加载

@blueRoach
Copy link

blueRoach commented Jun 4, 2020 •
edited

FOUC：加载时样式突然变化
原因：由于在渲染HTML时，遇到CSS样式表会重新渲染HTML

  • 样式表没有放到head里面
  • 使用了@import导入样式

解决：尽量把样式表放到body标签上面

@MrZ2019
Copy link

MrZ2019 commented Sep 16, 2020

FOUC：加载时样式突然变化
原因：由于在渲染HTML时，遇到CSS样式表会重新渲染HTML

样式表没有放到head里面
使用了@import导入样式
解决：尽量把样式表放到body标签上面

@maxthonl
Copy link

我不喜欢这类的英文简写，我之前做过各类CAD的集成，CAD行业也会有很多简写，说实在的一般制造业公司内部也会有很多简写，真心记不住这些简写，而且好多简写会撞库，头大。

@xiezhenghua123
Copy link

FOUC：样式表加载晚于html结构
解决办法：将样式表放到head里面

@amikly
Copy link

amikly commented Nov 5, 2021

定义

如果使用import方法对css进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC

原因

当样式表晚于结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象，下列情况可能会出现：

  • 使用import方法导入样式表
  • 将样式表放在页面底部
  • 有几个样式表，放在html结构的不同位置

解决办法

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

@WangXi01
Copy link

现在回头来看，一般不会问这种面试题了

@Iambecauseyouare
Copy link

FOUC:使用import方法对css进行导入，会导致某些页面在Windows下的Internet Explorer出现奇怪的现象：以无样式显示页面内容的瞬间闪烁，这种现象称为文档样式短暂失效
解决方法：使用link标签将样式表放入head中

@never123450
Copy link

FOUC（Flash of Unstyled Content）是指在网页加载过程中，由于样式表（CSS）加载延迟或未能及时应用，导致页面元素在加载完成之前以未样式化的形式显示出来的现象。

为了避免 FOUC，可以采取以下几种方法：

  1. 内联样式：将关键的 CSS 样式直接嵌入到 HTML 页面的 <head> 标签内，以内联样式的形式呈现。这样可以确保样式在页面加载过程中立即生效，避免 FOUC。

  2. 样式表优化：优化样式表的加载和应用，使其尽早加载并在页面渲染之前应用。可以将样式表放在 <head> 标签中，并使用适当的加载和缓存策略。

  3. 预加载样式表：使用预加载（preload）或异步加载（async）等技术，提前加载样式表文件，以确保在页面渲染之前已经下载并准备好样式。

  4. 隐藏内容：通过将页面的主要内容隐藏，直到样式表加载和应用完成，再将其显示出来。这可以使用 JavaScript 或 CSS 技术来实现。

  5. FOUC 闪烁修复：使用 JavaScript 或 CSS 技术来处理 FOUC 闪烁问题，例如使用 JavaScript 监听 DOMContentLoaded 事件，在样式表加载完成后再将页面内容显示出来。

需要根据具体情况选择适合的方法来避免 FOUC。综合使用上述方法可以最大程度地减少 FOUC 的出现，并确保页面在加载过程中能够正确地呈现样式化的内容。

@lili-0923
Copy link

FOUC即无样式内容闪烁，也可以称为文档样式短暂失效，主要就是指HTML已加载而样式表并未加载，此后样式表再加载而产生的闪烁现象。
样式表前置和尽量使用而避免使用@import

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests