白屏和FOUC

1.浏览器渲染机制

解释这两种现象之前，我们首先要了解一下浏览器一般的渲染顺序，以CSS用link写在head中为例：

Paste_Image.png

如上图所示，网页渲染按照如下顺序进行：

• 解析 HTML 标签, 构建 DOM 树；
• 载入html代码过程中，发现标签内有一个标签引用外部CSS文件，发出CSS文件的请求，服务器返回这个CSS文件；
• 解析 CSS 标签, 构建 CSSOM 树；
• 把 DOM 和 CSSOM 组合成 渲染树 (render tree)；
• 在渲染树的基础上进行布局, 计算每个节点的几何结构；
• 把每个节点绘制到屏幕上 (painting)

当以上的顺序受到阻塞时，根据浏览器各自渲染机制的不同，就会出现白屏或FOUC。

2.白屏和FOUC

• 白屏：浏览器页面在加载时，出现白屏无内容的现象；
  chrome浏览器的加载和渲染机制，是等css全部加载解析完后再渲染展示页面。如果CSS样式放置在底部，浏览器加载完HTML以后，发现CSS还没加载，这个时候是没法渲染展示页面的，只好再去加载CSS。这个加载等待的时间内就出现了白屏；

• FOUC：Flash of Unstyled Content，无样式内容闪烁，是指在浏览器加载内容过程中，先出现没有样式的网页内容，再展现出加载了样式的网页页面；
  其他一些浏览器，例如Firefox，会在css未加载前先展现页面，等css加载后再重绘一次。
  同样的，如果CSS样式也被放置在底部，浏览器会先加载没有样式的HTML页面，等CSS加载完，再重绘一次，就出现了FOUC；

3.出现白屏和FOUC的常见原因

• css样式放在底部，导致HTML加载完，还需要等待CSS的加载；
• css虽然放在顶部，但是使用@import，也可能加载等待，白屏；
• JavaScript 放入页面顶部，造成后面页面加载阻塞，也会出现白屏或FOUC