白屏和FOUC

白屏

IE和Chrome浏览器,会将HTML全部渲染上CSS样式后,再呈现出来,那么如果HTML内容特别多,CSS加载特别慢,那么页面等待的时间就会特别长,就会出现白屏。

FOUC

Firefox浏览器,对HTML是读一句呈现一句,所以CSS要放在前面的head标签中,这样一句一句呈现出来的HTML都是加载好样式的。如果CSS放在后面,那么浏览器就会先呈现没有样式的HTML内容,等读到放在后面的CSS了,再对HTML添加样式。这样用户看到的页面就是无样式内容闪烁。

做个比喻:
用户去大酒店点了一桌满汉全席

  • IE和Chrome 是将满汉全席的所有菜都做齐了一次性上桌,餐桌上一开始全是空的,相当于白屏。
  • Firefox 是做完一道菜上一道菜,CSS放在后面就相当于先上原材料,再在餐桌上加工成佳肴,用户看到的先是食材,再是佳肴,相当于无样式内容闪烁。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1 92
  • 1.CSS和JS在网页中的放置顺序是怎样的? css放在head标签里,JS放在body标签的 前。 2.解释白屏...
    candy252324阅读 468评论 0 0
  • 技巧 : 测试白屏 F12- network - No throttling 选择下载速度 Disable cac...
    毕子歌阅读 339评论 0 0
  • 1.浏览器渲染机制 解释这两种现象之前,我们首先要了解一下浏览器一般的渲染顺序,以CSS用link写在head中为...
    upup_dayday阅读 238评论 0 1
  • 天,热着热着,突然就凉了,心也凉了; 云,飘着飘着,突然就散了,人也散了; 树,长着长着,突然就枯了,发也枯了; ...
    心灵绿洲阅读 281评论 0 2