第五题：解释一下 FOUC ？

[Ray-56]

• 来源
• 如何避免

[GenXiaoLe]

Flash of unstyled content(无样式内容闪烁，简称FOUC)

1. 出现的形式
   页面被解析后先出现无样式的内容，然后在css加载渲染完成后，突然展现出所有样式，也就是闪烁一下突然显示样式，这种情况被称为FOUC。
2. 原因
   当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
3. 什么操作会导致出现FOUC
   • css引入使用了@import;
   • 存在多个style标签;
   • css文件在底部引用;
4. 解决方法
   用link加载css文件，放在head里面

[MMmaXingXing]

FOUC:
页面加载解析时,页面以样式A渲染;当页面加载完成时,突然以样式B渲染,导致出现样式闪烁。
样式A: 浏览器页面样式或者浏览器页面样式层叠部分已经加载好的样式。
样式B: 浏览器加载了全部的页面样式。

为什么会出现FOUC:

输入网址向浏览器发送请求时,服务器返回页面给浏览器,浏览器边下边解析边渲染。

渲染中html会被加载为DOM Tree，CSS会被加载为 CSSOM Tree, DOM Tree 和 CSSOM Tree 会被加载为 Render Tree 二者任一变化即会触发 Render Tree 变化

由于样式加载存在延时情况,页面先渲染出了部分行内样式和浏览器默认样式等样式文件,加载完成后,触发 Render Tree 变化, 在网络不好或者样式文件体积较大的情况下,会出现样式闪烁明显现象。

常见如在页面最后引用样式、存在多个style 覆盖原有样式。

解决方案:

因此，常见会把样式引入 link style 放在head中, 在 body渲染前尽量构建相对完整的 CSSOM Tree, 并且 link style等标签虽然不会阻塞元素解析但是会阻塞页面渲染。(此方案 chrome 支持较好 其他浏览器各有差异)

方案二、在样式加载前隐藏body，等样式加载完显示，此方案会出现较长时间白屏，但可以解决闪烁问题(优化策略 先在body中加一个非常轻量的loading状态，等加载完毕后删除并将资源显示出来(理论可以,需测试))