阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      什么是FOUC(无样式内容闪烁)?如何来避免FOUC?

      (一般指IE在加载网页的时候,出现短暂的CSS样式失效。)

      如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:

      以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.原因大致为:

      • 使用import方法导入样式表。
      • 将样式表放在页面底部

      有几个样式表,放在html结构的不同位置。

      其实原理很清楚:当样式表晚于 结构性html 加载,当加载到此样式表时,页面将停止之前的渲染。

      此样式表被下载和解析后,将重新渲染页面,也就出现了短暂 的 花屏现象。

      解决方法:避免使用@import方法导入CSS,且将样式表链接都放在head中即可避免此问题。

      经典的总结

      FOUC - Flash Of Unstyled Content 文档样式闪烁

      <style type="text/css" media="all">@import "../fouc.css";</style>
      

      而引用CSS文件的@import就是造成这个问题的罪魁祸首。

      IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。

      解决方法简单的出奇,只要在<head>之间加入一个<link>或者<script>元素就可以了。

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录