白屏问题与FOUC

在讨论“白屏与FOUC”之前,我们先理清浏览器的加载原则:

  • 浏览器对于图片和CSS,在加载时会并发加载;
  • 浏览器对于JavaScript,在加载时会禁用并发,并且阻止其后的文件的加载及组件的下载。

接着我们还需要知道,不同浏览器的处理CSS和HTML的方式是不同的。

  • 比如像IE、chrome,采用的是等CSS全部加载解析完后再渲染展示页面。
  • firefox则是在CSS未加载前先展示html的内容,等CSS加载后重新对样式进行修改。

所以对于白屏的出现情况往往因为CSS样式被置于底部(最后加载),当新窗口打开或者刷新的时候,页面会出现白屏。
如果使用 @import标签,它引用的文件则会等页面全部下载完毕再被加载,所以也可能出现白屏。

而当JavaScript被置于顶部时,会禁用并发,并且阻止其后的文件的加载及组件的下载,致使白屏的情况出现。

对于firefox浏览器,当CSS样式被置于底部,html会先呈现出来,待到html加载完毕,再一次性加载CSS样式使得样式突然呈现,就有了闪屏的现象。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,155评论 1 92
  • 无须沉湎历史,而是向前看,没有制度是完美的,正如没有人是完美的,制度正如地貌,是自然风化的结果,一切现象都是围绕真...
    咸叔说阅读 357评论 0 3
  • 有一首歌曾经挺火——《笨小孩》,这歌刚唱响大街小巷时,我惊叹:这题目怎么会这么贴切自己呢! 我从小就是个笨孩子...
    冰黛雨阅读 1,175评论 7 8

友情链接更多精彩内容