白屏和FOUC
2017-08-10 本文已影响0人
upup_dayday
1.浏览器渲染机制
解释这两种现象之前，我们首先要了解一下浏览器一般的渲染顺序，以CSS用link写在head中为例：
Paste_Image.png
如上图所示，网页渲染按照如下顺序进行：
- 解析 HTML 标签, 构建 DOM 树；
- 载入html代码过程中，发现<head>标签内有一个<link>标签引用外部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
