美文网首页
白屏问题与FOUC

白屏问题与FOUC

作者: 饥人谷_技术上没看见 | 来源:发表于2017-02-12 14:32 被阅读0次

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

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

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

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

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

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

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

相关文章

  • 白屏问题与FOUC

    在讨论“白屏与FOUC”之前,我们先理清浏览器的加载原则: 浏览器对于图片和CSS,在加载时会并发加载; 浏览器对...

  • 测试模拟 白屏 / FOUC

    白屏和FOUC 白屏与无样式内容闪烁(FOUC)是因为不同浏览器加载与显示页面的机制不同而造成的。 我们可以通过一...

  • 解析白屏和FOUC

    1.到底什么是白屏什么是FOUC 白屏与无样式内容闪烁(FOUC)是因为不同浏览器加载与显示页面的机制不同而造成的...

  • 白屏和FOUC

    白屏和FOUC(无样式内容闪烁)均是由于不同的浏览器渲染机制导致的问题。白屏主要发生在IE上,FOUC主要发生在F...

  • 白屏和FOUC 效果演示

    我通过以下语句将CSS文件的加载时间拉长,来演示白屏和FOUC现象: 白屏效果 FOUC效果

  • 白屏与FOUC

    一个是没准备好前啥都不出来等会一起出来,一个是先出来html,等一会儿才出来css样式 白屏: 使用@import...

  • 浏览器加载

    白屏和 FOUC FOUC指无样式内容闪烁,白屏指页面会出现白屏; 它们主要是由于不同浏览器处理,对于某些场景,处...

  • 白屏问题和FOUC

    白屏问题 白屏的根本原因是浏览器在渲染的时候没有请求到或请求时间过长造成的。 浏览器对于图片和CSS,在加载时会并...

  • 白屏和FOUC

    白屏和FOUC 白屏:浏览器加载会等css,js,图片等加载完成后,显示FOUC:浏览器会先显示文字,加载完成cs...

  • js基础——基本概念、数据类型、运算符、流程控制语句

    一、CSS和JS在网页中的放置顺序是怎样的? CSS和JS在网页中的放置顺序 二、解释白屏和FOUC 白屏问题如果...

网友评论

      本文标题:白屏问题与FOUC

      本文链接:https://www.haomeiwen.com/subject/ozsaittx.html