CSS | 如何来避免 FOUC(无样式内容闪烁)现象的发生?

一、什么是 FOUC(无样式内容闪烁)?

FOUC(Flash of Unstyled Content)是指网页在加载过程中,由于CSS样式加载延迟或加载顺序不当,导致页面出现闪烁或呈现出未样式化的内容的现象。

这种现象通常发生在HTML文档已经加载,但CSS样式表尚未加载或加载顺序不正确时,导致页面内容在没有应用样式的情况下短暂显示,随后样式表加载完成,页面内容才呈现出最终的样式效果。这种闪烁现象不仅影响用户体验,还可能对网站的整体形象和品牌形象造成负面影响。

FOUC 的原因是由于浏览器在渲染页面时,会先加载 HTML 文件,然后再加载 CSS 文件。如果 CSS 文件加载时间过长或者放置位置不当,浏览器就会先加载 HTML 文件并显示页面内容,而没有样式的 CSS 文件则会在加载完成后才被应用于页面,从而导致页面出现无样式的内容闪烁现象。

示例: ‌FOUC - FlashOf Unstyled Content 文档样式闪烁现象的产生

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

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

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

下面我们就来总结一下,都有哪些方法可以避免 FOUC现象的发生?

二、如何来避免 FOUC现象的发生?

为了避免FOUC现象,可以采取以下几种方法:

  1. ‌‌‌使用内联CSS或内部样式:使用内联CSS或在<head>中使用内部样式——内嵌样式表:将CSS样式放在<head>中‌:将CSS链接或样式块放在HTML文档的<head>部分,确保浏览器在渲染页面内容之前首先加载和应用样式。这样做可以确保页面在显示之前已经应用了所需的样式,避免了无样式内容的短暂显示。‌‌‌总之,使用内联CSS或内部样式都可以确保样式立即可用于渲染页面内容,避免FOUC现象的发生。

  2. 预加载样式表:使用<link>标签的preload属性——在<link>标签中使用preload属性,可以确保浏览器尽早加载CSS文件。这有助于减少FOUC现象的发生,因为样式表可以在页面内容渲染之前被加载。

  3. 优化样式表的加载顺序和位置:通过合理规划样式表的加载顺序和位置,可以避免因样式表加载延迟而导致的FOUC现象。例如,将样式表放在<head>中,或者使用媒体查询(media queries)来控制样式表的加载条件。

  4. 使用样式回退:在CSS样式加载之前,可以使用基本的HTML样式来避免FOUC,确保页面在加载完成前依然有可用的样式。

  5. 合理使用Web 字体:Web 字体加载也可能导致 FOUC,可将字体文件嵌入到CSS中,也可以使用 font-display: swap 或其他字体加载策略,确保在字体加载期间使用后备字体(如系统字体),避免内容无样式闪烁。
     
  6. 避免使用 JavaScript 动态加载样式表:尽量避免通过 JavaScript 动态加载 CSS 文件。如果必须使用,可以确保在 DOM 加载之前完成样式表的加载。
     
  7. 避免使用阻塞CSS加载的脚本确保JavaScript脚本不会阻塞CSS样式的加载,可以使用asyncdefer属性来异步加载脚本。

  8. 服务器端渲染(SSR)和样式提取:对于使用 React、Vue 等框架的应用,使用服务器端渲染(SSR)和样式提取工具(如 styled-components 的 ServerStyleSheet)可以确保样式在服务器端渲染时已经被注入到 HTML 中。
     
  9. 使用样式表链接的 media 属性:<link> 标签中添加 media 属性,指定样式表适用的媒体类型,例如 screen、print 或者 all 等,可以避免不必要的样式表加载,从而提高页面的性能和速度。

总之,避免FOUC现象需要从多个方面入手,包括优化CSS的加载方式、合理规划样式表的加载顺序和位置,以及使用成熟的样式表框架等。通过这些方法,可以有效减少FOUC现象的发生,提升用户体验和网站的整体形象‌。


参考资料

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/54594.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis数据结构之哈希表

这里的哈希表说的是value的类型是哈希表 一.相关命令 1.hset key field value 一次可以设置多个 返回值是设置成功的个数 注意&#xff0c;哈希表中的键值对&#xff0c;键是唯一的而值可以重复 所以有下面的结果&#xff1a; key中原来已经有了f1&#xff0c;所以再使用hse…

RTSP学习

RTSP基本原理 实时流传输协议(RTSP:RealTimeStreaming Protocol1)是一种网络传输协议,旨在发送低延迟流。 该协议由RealNetworks,Netscape和哥伦比亚大学的专家在1996年开发。它定义了应如何打包流中的数据以进行传输。 类似一个控制命令的协议play teardown 负责音视频的数据…

C++ STL之栈stack

一.概述 C 中的 std::stack 是一种容器适配器&#xff0c;提供了一种后进先出&#xff08;LIFO, Last In First Out&#xff09;的数据结构。它只允许在栈顶进行插入和删除操作&#xff0c;不支持随机访问。 主要特性&#xff1a; 后进先出&#xff08;LIFO&#xff09;&…

二叉树(Java)

一.1.树形结构概念的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。它具有以下的特点&#xff1a;…

[SDX35+WCN6856]SDX35 +WCN6856 remount firmware出现失败问题原因及解决方案

SDX35 SDX35介绍 SDX35设备是一种多模调制解调器芯片,支持 4G/5G sub-6 技术。它是一个4nm芯片专为实现卓越的性能和能效而设计。它包括一个 1.9 GHz Cortex-A7 应用处理器。 SDX35主要特性 ■ 3GPP Rel. 17 with 5G Reduced Capability (RedCap) support. Backward compati…

大模型培训讲师叶梓:Llama Factory 微调模型实战分享提纲

LLaMA-Factory ——一个高效、易用的大模型训练与微调平台。它支持多种预训练模型&#xff0c;并且提供了丰富的训练算法&#xff0c;包括增量预训练、多模态指令监督微调、奖励模型训练等。 LLaMA-Factory的优势在于其简单易用的界面和强大的功能。用户可以在不编写任何代码的…

golang学习笔记28——golang中实现多态与面向对象

推荐学习文档 golang应用级os框架&#xff0c;欢迎stargolang应用级os框架使用案例&#xff0c;欢迎star案例&#xff1a;基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识&#xff0c;这里有免费的golang学习笔…

【速成Redis】03 Redis 五大高级数据结构介绍及其常用命令 | 消息队列、地理空间、HyperLogLog、BitMap、BitField

前言&#xff1a; 上篇博客我们讲到redis五大基本数据类型&#xff08;也是就下图的第一列&#xff09;。 【速成Redis】02 Redis 五大基本数据类型常用命令-CSDN博客文章浏览阅读1k次&#xff0c;点赞24次&#xff0c;收藏10次。该篇适用于速成redis。本篇我们将讲解&#…

探秘链表:十大经典题目全解析

目录 &#x1f4af;前言 &#x1f4af;常见链表题目类型 ⭐反转链表 ⭐合并两个有序链表 ⭐检测链表中是否存在环 ⭐找到链表的中间节点 ⭐删除链表中的节点 ⭐判断两个链表是否相交 ⭐找到链表中环的入口节点 ⭐复制带随机指针的链表 &#x1f4af;解题技巧与注意事…

Leetcode 2246. 相邻字符不同的最长路径(一般树)树形dp C++实现

问题&#xff1a;Leetcode 2246. 相邻字符不同的最长路径 给你一棵 树&#xff08;即一个连通、无向、无环图&#xff09;&#xff0c;根节点是节点 0 &#xff0c;这棵树由编号从 0 到 n - 1 的 n 个节点组成。用下标从 0 开始、长度为 n 的数组 parent 来表示这棵树&#x…

001.从0开始实现线性回归(pytorch)

000动手从0实现线性回归 0. 背景介绍 我们构造一个简单的人工训练数据集&#xff0c;它可以使我们能够直观比较学到的参数和真实的模型参数的区别。 设训练数据集样本数为1000&#xff0c;输入个数&#xff08;特征数&#xff09;为2。给定随机生成的批量样本特征 X∈R10002 …

【Delphi】扩展现有组件创建新的 FireMonkey 组件(步骤二)

实现指定格式的属性 步骤 1 中创建的 TClockLabel 组件需要在显示当前时间时定义日期时间格式作为属性&#xff0c;以便组件用户可以指定。 一、实现指定格式的属性 要实现格式属性&#xff0c;请在 TClockLabel class 的发布部分添加以下一行&#xff1a; property Form…

Mybatis-Plus使用例过程中BaseMapper中的一些selectList方法找不到的问题

如果需要用到Mybatis-Plus里面BaseMapper的默认实现的一些方法&#xff0c;而不通过mapper.xml的方式自定义方法&#xff0c;那么在构建SqlSessionFactory的时候需要注意应该通过Mybatis-Plus中的MybatisSqlSessionFactoryBean来获取SqlSessionFactory&#xff0c;使用Mybatis中…

CST电磁仿真77GHz汽车雷达保险杠

77G毫米波雷达仿真时&#xff0c;要考虑天线罩和保险杠的影响。通常保险杠都是多层结构&#xff0c;有的层非常薄。如果采用传统的3D建模方法&#xff0c;会导致网格数量巨大&#xff0c;进而影响到求解效率。 三维保险杠&#xff08;bumper&#xff09;模型如下图所示&…

vue3.5新特性

vue在2024.09.03发布了3.5正式版本&#xff0c;其中包含多方面的升级和优化 性能优化 响应式系统重构优化&#xff0c;在内存占用、性能方面均有收益 Memory Usage Improvements Given a test case with 1000 refs 2000 computeds (1000 chained pairs) 1000 effects sub…

【C++篇】探寻C++ STL之美:从string类的基础到高级操作的全面解析

文章目录 C string 类详解&#xff1a;从入门到精通前言第一章&#xff1a;C 语言中的字符串 vs C string 类1.1 C 语言中的字符串1.2 C string 类的优势 第二章&#xff1a;string 类的构造与基础操作2.1 string 类的构造方法2.1.1 示例代码&#xff1a;构造字符串 2.2 string…

二期 1.4 Nacos安装部署 - Window版

本文目录 Nacos支持三种部署模式环境准备下载Nacos启动登录服务注册与查看Nacos支持三种部署模式 单机模式 - 用于测试和单机试用。集群模式 - 用于生产环境,确保高可用。多集群模式 - 用于多数据中心场景。以 Window单机模式 抛转引玉,其它部署方式参考官方文档: https://n…

使用Python实现深度学习模型:智能电影制作与剪辑

随着人工智能技术的飞速发展,深度学习在各个领域的应用越来越广泛。在电影制作与剪辑领域,深度学习技术也展现出了巨大的潜力。本文将介绍如何使用Python实现一个简单的深度学习模型,用于智能电影制作与剪辑。我们将使用TensorFlow和Keras库来构建和训练模型,并展示如何应用…

部署自己的对话大模型,使用Ollama + Qwen2 +FastGPT 实现

部署资源 AUTODL 使用最小3080Ti 资源&#xff0c;cuda > 12.0使用云服务器&#xff0c;部署fastGPT oneAPI&#xff0c;M3E 模型 操作步骤 配置代理 export HF_ENDPOINThttps://hf-mirror.com下载qwen2模型 - 如何下载huggingface huggingface-cli download Qwen/Qwen2-…