白屏和FOUC

作者: web_Tracy | 来源:发表于2018-06-04 23:26 被阅读1次

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


白屏:在浏览器和用户等待位于底部的样式表时,浏览器会延迟显示任何可视化组件,即所谓的白屏现象
FOUC:页面在样式表下载解析之前,组件就已经逐步加载显示,当样式表解析完成后,已经显示的组件就要用新的样式进行绘制,这就导致所谓的无样式内容闪烁


原因:

  1. Firefox里,无论样式表至于顶部还是底部,总是采用逐步呈现的方式来加载组件。因此,若样式不是最终呈现所必需的,则用户基本感觉不到有什么差别;反之当样式为呈现所必需的时候,则会呈现无样式内容闪烁

  2. IE里复杂一点。如果页面组件已经加载显示完毕,但CSS慢一点才加载解析完毕,这时用户就会发现原先显示的页面所呈现的方式跟最初看到的不一样。这种用户体验其实是很差的,为了防止这种情况的出现,IE会阻止页面的逐步呈现直至样式表加载解析完毕,然后页面所有内容呈现在计算机屏幕上


建议:

  1. 将样式表置于head标签中
    2.将js脚本置于底部,因为js脚本会阻塞内容的呈现和后面组件的下载。对于图片和CSS会并发加载,但在加载js时,会禁用并发,并且组织其他内容的下载,所以把js放在顶部也会导致白屏现象

相关文章

  • 白屏和FOUC 效果演示

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

  • 浏览器加载

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

  • 白屏和FOUC

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

  • 白屏和FOUC

    主要内容: CSS和JS在网页中的放置顺序、白屏和FOUC、async和defer以及网页的渲染机制。 CSS和...

  • 白屏和FOUC

    1.浏览器渲染机制 解释这两种现象之前,我们首先要了解一下浏览器一般的渲染顺序,以CSS用link写在head中为...

  • 白屏和fouc

    浏览器的白屏与无样式内容闪烁(Flash of unstyled content),是由于浏览器加载与显示页面方式...

  • 白屏和FOUC

    白屏问题: 如果把样式放在底部,对于IE浏览器,chrome等(css全部加载后再呈现,有可能等待长),在某些场景...

  • 白屏和FOUC

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

  • 测试模拟 白屏 / FOUC

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

  • 解释白屏和FOUC

    白屏:首先要了解一下chrome和IE浏览器的渲染机制。1.解析HTML标签构建DOM树;2.解析CSS构建CSS...

网友评论

    本文标题:白屏和FOUC

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