关于白屏和FOUC现象

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容