白屏和FOUC

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


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


原因:

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

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


建议:

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

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