解释白屏和FOUC

白屏:
首先要了解一下chrome和IE浏览器的渲染机制。
1.解析HTML标签构建DOM树;
2.解析CSS构建CSSOM树;
3.把这两者组合成渲染树,根据渲染树进行布局,计算每个节点,再绘制到屏幕上。
如果把样式放在文档底部,浏览器会等HTML和CSS完全加载完成之后再绘制到屏幕上去,譬如我们打开某些国外的网站可能出现加载时间过长,页面会出现白屏,而不是内容逐步展现。
FOUC:
如果把样式放在底部,对于FireFox浏览器,会逐步加载无样式的内容,等CSS加载完成之后突然展现样式。
这是由于FireFox的渲染逻辑是解析HTML就会直接画到页面上,这时你会看到没有样式的内容,CSS再通过不断的解析将页面重绘一遍,也就是闪烁一下突然展现样式,这就是FOUC。

你可能感兴趣的:(解释白屏和FOUC)