前端技术分享-码匠 极客编程技术分享

您当前位于:HTML5冷知识 ——> FOUC-加载网页时会出现短暂的CSS样式失效
上一篇:Javascript中的Label语句 下一篇:没有了

FOUC-加载网页时会出现短暂的CSS样式失效

2015/08/03 20:31:51 | 作者:HTML5学堂(码匠) | 分类:HTML5冷知识 | 关键词:FOUC,样式失效,短暂失效,网页加载问题

FOUC-文档样式短暂失效

HTML5学堂:FOUC:Flash Of Unstyled Content。它指的是加载网页时会出现短暂的CSS样式失效。2013年年底的时候,自己的一个学生问自己这个问题,因此发出来跟大家分享一下~

造成FOUC的原因

浏览器采用的是windows版本的IE浏览器,且版本在5.0以上(也就是现在所有的IE浏览器)。

IE的临时文件夹中没有缓存过该页面的CSS文件。

样式表位置异常:如使用import方法导入样式表;将样式表放在页面底部;有多个样式表,放在html结构的不同位置。

FOUC的基本原理

样式表晚于结构代码的加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象,这段时间的长短跟网速,电脑速度都有关系。

FOUC的解决办法

在head之间加入一个link或者script元素就可以了

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇:Javascript中的Label语句 下一篇:没有了