性能优化 - 你能说一说,为什么做了骨架屏,FCP的指标还是没有提升吗

难度级别:中高级及以上                               提问概率:80% 


FCP的全程是First Contentful Paint,是衡量网页性能的一个重要指标,很多人把FCP理解为元素内容首次渲染到浏览器上的时间。但由于现在比较流行的Vue或是React项目中,HTML文档最初只有一个id为app的DIV元素,只有把CSS和Javascript文件加载、解析、执行完成之后,才能讲最终的真实DOM内容填充到最初的DIV元素中。所以,但从前端角度来说的话,往DIV元素中填充真实DOM这一过程时间越久,导致网页的白屏时间就会越长,用户在这一等待的过程中非常容易跳出页面,这无疑带来了非常差的用户体验。

为了解决长时间的白屏问题,很多网站采用了提前加载骨架屏的方式。骨架屏就是采用DIV+CSS的方式,模拟首屏整体元素结构的轮廓,将这些内容提前放置于id为app的DIV元素中,在用户真正看到首屏内容之前,可以更快的看到骨架屏,所以可以把骨架屏更通俗的理解为非白屏等待页。不过虽然解决了长时间的白屏问题,而且骨架屏也是早于真正用户所需网页元素被渲染的,但其实FCP这个指标并没有得到提升。

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

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

相关文章

篮球竞赛|基于Springboot的篮球竞赛预约平台系统设计与实现(源码+数据库+文档)

篮球竞赛预约平台目录 基于Springboot的篮球竞赛预约平台系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1、前台: 2、后台 管理员功能 用户功能 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff…

武汉星起航深入分析市场动态,赢得跨境市场的高度认可

随着全球跨境电商的蓬勃发展,武汉星起航以其独到的市场洞察和深度合作模式在行业中崭露头角。公司凭借对市场趋势、消费者需求和竞争格局的敏锐洞察而声名鹊起,不仅成功跟随市场脉搏,更在竞争激烈的跨境电商领域中脱颖而出。 武汉星起航在制…

阿里云服务器可以干嘛?阿里云服务器八大用途介绍

阿里云服务器可以干嘛?能干啥你还不知道么!简单来讲可用来搭建网站、个人博客、企业官网、论坛、电子商务、AI、LLM大语言模型、测试环境等,阿里云百科aliyunbaike.com整理阿里云服务器的用途: 阿里云服务器活动 aliyunbaike.com…

Sharding

Sharding操作 什么是ShardingSharding-JDBC一、引入maven依赖 (sharding-jdbc-spring-boot-starter)二、水平分表操作(一个库多个相同结构表)其他的maven依赖版本 (shardingsphere-jdbc-core-spring-boot-starter&…

JavaScript - 请问你是如何中断forEach循环的

难度级别:中高级及以上 提问概率:65% forEach与原始for循环不同的是,并不能通过简单的break或是return中断循环,意思就是不管需要循环的数组有多长,一旦使用了,就会将数组所有元素循环一遍才会结束。其实回答这道题,就要想到forEach的使…

使用GDAL进行简单的坐标系转换

使用GDAL进行简单的坐标系转换 使用python GDAL进行简单的坐标系转换,暂时不考虑不同基准坐标系转换的精度问题。 安装环境 使用UbuntuAnaconda python 环境 conda install gdal 定义坐标系 from osgeo import gdal from osgeo import osrsrs_wgs84 osr.Spati…

Linux系统下关闭Java进程

关闭Java进程具体分为两步: 1.ps查进程ID 2.kill杀进程 具体的命令如下: ps查进程ID:ps -ef | grep java kill杀进程:kill -9 对应进程号 linux下解除被占用的端口号: 1.查看8088端口是否被占用: netsta…

开源区块链系统/技术 总结(欢迎补充,最新)

1. FISCO BCOS FISCO BCOS 2.0 技术文档 — FISCO BCOS 2.0 v2.9.0 文档https://fisco-bcos-documentation.readthedocs.io/ 2. ChainMaker(长安链) 文档导航 — chainmaker-docs v2.3.2 documentationhttps://docs.chainmaker.org.cn/v2.3.2/html/in…

基于ssm办公用品管理系统开发与设计论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本办公用品管理系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息…

Composer Windows 安装

Composer 的下载地址为:Composer 1 运行安装程序 当启动安装程序后单击下一步继续。 选择 PHP 路径 如果你的计算机上没有安装 PHP 的话,Composer 的安装无法继续。 你需要选择你本地安装的 PHP 路径。 配置代理地址 默认的情况下,可以不…

酷开科技|酷开系统帮你找到快乐时光的正确打开方式!|酷开会员

在难得的周末假期中,你是否也希望自己的生活变得更加多彩呢?在闲暇时间里,你是否计划好了如何度过?小朋友们自然希望能够有父母陪伴在身边,而大朋友们也希望能给这个时节留下不一样的回忆。不论你对生活的期待是什么&a…

GPU部署ChatGLM3

首先,检查一下自己的电脑有没有CUDA环境,没有的话,去安装一个。我的电脑是4060显卡,买回来就自带这些环境了。没有显卡的话,也不要紧,这个懒人安装包支持CPU运行,会自动识别没有GPU,…