HTML+CSS32 FOUC
FOUC，Flash Of Unstyled Content，中文名称无样式内容闪烁。就是当浏览器在解析一个网页的时候，会出现的内容样式闪烁的现象。
什么是FOUC
FOUC，Flash Of Unstyled Content，中文名称无样式内容闪烁。就是当浏览器在解析一个网页的时候，会出现的内容样式闪烁的现象。
具体的过程是，当页面加载渲染时，首先以样式A渲染，当页面加载渲染完成时，页面突然改为由样式B渲染，导致出现页面样式闪烁。
原理
为什么会出现FOUC呢？这和浏览器渲染页面的流程机制有关系：
（1）浏览器会首先构建DOM树，
（2）处理CSS，生成样式树
（3）将DOM树和样式树合并，构建渲染树
（4）生成盒模型
（5）绘制信息
在第二步中，我们的CSS样式是放在<head>标签中的，样式树的构建过程不会阻塞DOM树的构建，但是由于渲染树依赖于样式树，所以只会在DOM树和样式树都解析完成后才会构建渲染树，进行后面的绘制。这样当文档的内容被绘制在屏幕上时，是已经加载了样式的内容。
但是，如果在CSS外部样式表没有放在<head>中，而是放在文档尾部，第二步中的样式树会采用浏览器内置样式（user agent stylesheet）来生成样式树。这样开始绘制内容采用的样式就是浏览器内置样式。当解析到文档尾部的自定义样式表时，会停止之前的渲染，重新加载样式，这就导致了页面样式有一个突变的过程，出现了FOUC的现象。
具体原因
一般来说，出现FOUC的原因都是在浏览器开始绘制信息后才加载样式，一般会产生FOUC的操作有：
（1）样式表没有放放在<head>中，而是放在页面底部，原因上面说过了。
（2）通过import导入样式表，它会组织并行加载代码，
解决方法
将CSS外部样式表通过<link>的方式放在<head>中加载
Create-React-App
在使用Create-React-App脚手架创建React的应用时，遇到了FOUC的问题，这是Create-React-App的2.1.4和2.1.5版本的bug
解决方法就是回退到2.1.3版本，或者试一下2.1.5+版本是否解决了这个问题。