如何避免FOUC

FOUC即无样式内容闪烁也可以称为文档样式短暂失效，主要就是指HTML已加载而样式表并未加载，此后样式表再加载而产生的闪烁现象。

样式表前置

根据浏览器渲染的顺序，将CSS在<head>中引入或者嵌入，相对于将CSS放到<body>或者页面底部来说，可以使页面渲染速度加快，这对于页面内容比较丰富的网站或者网络链接较慢时相当重要。假如将样式表放置于底部，就会导致浏览器还未加载样式表就开始渲染页面，无法渐进式渲染页面而直接从无样式状态立即跳转到有样式状态，就会造成FOUC，用户体验较差；此外有些浏览器可能会在CSS下载完成后才开始渲染页面，样式表放在下方会导致页面渲染推迟。

尽量避免使用@import

尽量使用<link>而避免使用@import，当HTML文件被加载时，<link>引用的文件会同时被加载，而@import引用的文件则会等页面全部下载完毕再被加载，所以有时候浏览@import加载CSS的页面时会没有样式，会出现FOUC现象，网速慢的时候就比较明显。此外当<link>与@import混用可能会对网页性能有负面影响，在一些低版本IE中<link>与@import混用会导致样式表文件逐个加载，破坏并行下载的方式导致页面加载变慢。此外无论是哪种浏览器，若在<link>中引入的CSS中继续使用@import加载外部CSS，同样会导致顺序加载而不是并行加载，因为浏览器需要先解析<link>引入的CSS发现@import外部CSS后再次引入外部CSS，这样就导致页面加载变慢。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.cnblogs.com/xianyulaodi/p/5198603.html

如何避免FOUC的更多相关文章

  1. 什么是FOUC？如何避免FOUC？

    因为在看一些面试题,所以接触到了这个词 FOUC 什么叫做 FOUC 浏览器样式闪烁 如果使用import方法对css进行导入,会导致某些页面在Windows 下的Internet Explorer出 ...

  2. 什么是FOUC？如何避免FOUC？///////////////////////////zzzz

     一个新的名词叫做 FOUC 浏览器样式闪烁,之前也听说过一些类似的东西,比如样式突变等等,但这东西竟然有学名的..什么是FOUC(文档样式短暂失效)?如果使用import方法对CSS进行导入,会导致 ...

  3. 转：什么是FOUC？如何避免FOUC？

    今天了解了一个新的名词叫做 FOUC 浏览器样式闪烁,之前也听说过一些类似的东西,比如样式突变等等,但这东西竟然有学名的.. 什么是FOUC(文档样式短暂失效)?如果使用import方法对CSS进行导 ...

  4. 前端魔法堂：解秘FOUC

    前言  对于问题多多的IE678,FOUC(flash of unstyled content)--浏览器样式闪烁是一个不可忽视的话题,但对于ever green的浏览器就不用理会了吗?下面尝试较全面 ...

  5. 测试模拟 白屏 / FOUC

    白屏和FOUC 白屏与无样式内容闪烁(FOUC)是因为不同浏览器加载与显示页面的机制不同而造成的. 我们可以通过一个实验来进行测试和模拟白屏.FOUC的现象,让我们更好的理解白屏.FOUC. 测试de ...

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

      问题描述 偶然间看到FOUC这个单词,在Google里找了半天终于发现了它的含义:Flash Of Unstyled Content.它指的是在某些情况下,IE在加载网页时会出现短暂的CSS样式失 ...

  7. FOUC

    如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Fl ...

  8. Flash of Unstyled Content (FOUC)

    在这次的产品发布中,客户发现了一个问题,就是在Firefox浏览器中,页面在加载的时候,出现没有样式的内容一闪而过的现象.其实,在测试过程中,我们也看到了类似的问题,但是并没有意识到这是一个问题,以为 ...

  9. 【18】什么是FOUC?如何避免

    [18]什么是FOUC?如何避免 Flash Of Unstyled Content: 用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成页面闪烁. 解决方法: ...

  10. 如何避免FOUC，是如何产生的

    FOUC(Flash Of Unstyled Content)即浏览器样式闪烁或者叫做无样式内存闪烁(用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成页面闪烁 ...

随机推荐

  1. 处理命令行main函数args参数

    引用 System.CommandLine 库(需要显示预览版才能看到) var fileOption = new Option<FileInfo?>( name: "--fil ...

  2. SqlSugar DbContext

    title: SqlSugar DbContext date: 2023-02-16 20:01:41 tags: SqlSugar categories: ORM description: 总结整理 ...

  3. tidb备份恢复的方式方法

    tidb备份恢复的方式方法 摘要 可以单独每个数据库实例进行备份,但是这种机制实在是太慢了. 网上查资料发现可以使用 tiup br 的方式进行备份. 但是大部分文档都比较陈旧, 官网上面又比较贴心的 ...

  4. [转帖]Kafka 核心技术与实战学习笔记（八）kafka集群参数配置（下）

    一.Topic级别参数 Topic的优先级: 如果同时设置Topic级别参数和全局Broker参数,那么Topic级别优先 消息保存方面: retention.ms:规定Topic消息保存时长.默认是 ...

  5. [转帖]redis进程绑定指定的CPU核

    文章系转载,便于分类和归纳,源文地址:https://blog.csdn.net/youlinhuanyan/article/details/99671878 1)查看某服务的pid $ ps -au ...

  6. HTTPS下tomcat与nginx的前端性能比较

    HTTPS下tomcat与nginx的前端性能比较 摘要 之前比较http的web服务器的性能. 发现nginx 比 tomcat 要好 50% 然后想到, https的情况下不知道两者有什么区别 所 ...

  7. 银河麒麟安装nmon以及rpc.rstatd的方法

    背景说明 随着公司业务的发展,需要在ARM环境上面进行性能测试. 为了进行ARM环境的验证,需要一些组件进行资料收集. 比较好的方式是使用nmon或者是rstatd进行性能参数收集. 为了方便部署,想 ...

  8. fiddler如何抓取https请求

    pc端browse 1.打开下载好的fiddler,点击tools选择options后进入https tab下,勾选Decrypt  HTTPS CONNECTS 和Ignore server cer ...

  9. vue启动报错_interopRequireDefault is not a function

    起因 今天接触一个项目vue. 在安装好环境之后,启动的时候报错_interopRequireDefault is not a function 解决的办法:我觉得可能是因为node_modules安 ...

  10. vue3.0中reactive的正确使用姿势

    场景 在项目开发的时候,前端肯定是先写静态页面 在静态页面写好之后 然后就可以与后端对接数据了[高兴] 但是在对接接口的时候 我们会发现后端返回来的字段与前端在页面上写的可能不一致 这个时候有意思的事 ...