学习到CSS阻塞解析的问题，看到白屏和FOUC，想要记录一下了解到的知识。

CSS在加载的时候如果加载时间过长，则会影响一些东西。 这个时候会发生阻塞渲染。

阻塞渲染 ： 阻塞点后面的标签会继续被正常解析，DOM也会正常被看见。img，link等会继续发送请求获取外部资源，但不会触发页面渲染（没有样式，白屏），也不会执行JavaScript代码。 若我们把link样式表放在了head标签里，当CSS加载时间过长的时候，就会发生白屏现象。打开网页，页面一片空白，过了一段时间突然展示完整的有样式的内容。就是因为CSS还没有加载完成。

FOUC是什么

FOUC全称为 Flash Of Unstyled Content 也就是文档样式短暂闪烁（失效）

那么什么是文档样式短暂失效呢？

使用import方法对CSS进行导入，或者将link样式表标签放置在页面底端，或者有几个link样式表，放在html结构的不同位置。

都会导致一些页面在浏览器上以无样式显示页面内容，然后再进行样式渲染。

发生这样的原因

浏览器会首先加载整个HTML文档的DOM，然后再导入外部的CSS文件。 因此DOM结构是完整的，但是渲染被阻塞了。 就会暂时显示出无样式的页面内容，过一段时间才会渲染完成。这段时间的长短跟网速和电脑速度都有关系。

解决方法

注意：
尽量把link放在head标签内，防止出现FOUC。
若必须将样式表放在其他位置，则可以在页面顶端放置一些默认样式：

• 例如让所有内容都不显示；
• 或者显示一个loading的界面。