性能优化 - 你能说一说,为什么做了骨架屏,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.mzph.cn/news/799640.shtml

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

相关文章

自建ceph存储集群方案之从零到一

概述 根据硬件摩尔定律,硬件成本随时间越来越低,性能较之前越来越高,尤其是随着pcie全闪灯普及,理论上作为云服务的基础设施,存储应该越来越便宜。然而,购置商用sds产品的成本却一直居高不下,越…

在unbuntu服务器上使用nginx+uwsgi部署django项目

一、配置nginx 1. 安装nginx apt-get install nginx2. 编写nginx配置文件 进入nginx.conf文件路径:/etc/nginx/nginx.conf 编写以下内容: events {worker_connections 1024; # 工作进程的最大连接数量 }http{include mime.types;# 日志格式及保存路径…

(译) 理解 Elixir 中的宏 Macro, 第五部分:组装 AST

Elixir Macros 系列文章译文 [1] (译) Understanding Elixir Macros, Part 1 Basics[2] (译) Understanding Elixir Macros, Part 2 - Macro Theory[3] (译) Understanding Elixir Macros, Part 3 - Getting into the AST[4] (译) Understanding Elixir Macros, Part 4 - Divin…

【Labview】虚拟仪器技术

一、背景知识 1.1 虚拟仪器的定义、组成和应用 虚拟仪器的特点 虚拟仪器的突出特征为“硬件功能软件化”,虚拟仪器是在计算机上显示仪器面板,将硬件电路完成信号调理和处理功能由计算机程序完成。 虚拟仪器的组成 硬件软件 硬件是基础,负责将…

数字化转型回归底层逻辑

2024年第一季度已然过去,对于我们每个人而言,这都是一次严峻的挑战。2015年,蚓链数字化营销系统踏上研发之路。让我们回顾数字技术对企业的影响阶段:2012-2015 年,互联网在消费端产生巨大影响,引发了虚拟经…

清空nginx缓存并强制刷新

当对nginx的文件进行修改或更新时,可能会出现旧文件被缓存而无法立即生效的问题,此时需要清空nginx的文件缓存并强制刷新。可以通过以下步骤实现: 登录nginx服务器执行命令:sudo nginx -s reload (重新加载nginx配置&…

YOLOv5改进--轻量化YOLOv5s模型

文章目录 1、前言2、轻量化模型结构:3、模型对比4、训练结果图5、目标检测文章 1、前言 在边缘设备的场景下,目前的YOLOv5s,虽然能够快速实现目标检测,但是运行速度依旧稍慢点,本文在牺牲一点精度前提下,提…

Web漏洞-文件上传常见验证

后缀名:类型,文件头等 后缀名:黑白名单 文件类型:MIME信息 文件头:内容头信息 常见黑名单(明确不允许上传的格式后缀):asp、php、jsp、aspx、cgi、war (如果没有完整…

vscode:插件开发

文档&#xff1a; 连接 终端执行 sudo pnpm install -g yo generator-codeyo code// 这里建议选择 JavaScript 很少出错 # ? What type of extension do you want to create? New Extension (JavaScript) # ? Whats the name of your extension? HelloWorld ### Press <…

nacos derby.log无法的读取+derby数据库启动失败分析解决

排查思路分析 日志报错&#xff1a; derby.log文件权限不够&#xff08;root权限&#xff09;&#xff0c;无法读取&#xff0c;我用普通用户启动。 使用命令chown xx:xx derby.log修改属主和属组为普通用户后&#xff0c;又报出其他错误。 数据库启动不了&#xff0c;无…

Composer Windows 安装

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

【LeetCode刷题记录】15. 三数之和

15 三数之和 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [ n u m s [ i ] , n u m s [ j ] , n u m s [ k ] ] [nums[i], nums[j], nums[k]] [nums[i],nums[j],nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 n u m s [ i ] n u m s [ j ] n u …

java基础语法(11)| 内部类

1. 内部类 1.1 什么是内部类 将一个类A定义在另一个类B里面&#xff0c;里面的那个类A就称为内部类&#xff0c;B则称为外部类。 1.2 内部类的分类 成员内部类 局部内部类 匿名内部类 1.3 成员内部类 在描述事物时&#xff0c;若一个事物内部还包含其他事物&#xff0c;就…

基于starganvc2的变声器论文原理解读

数据与代码见文末 论文地址&#xff1a;https://arxiv.org/pdf/1907.12279.pdf 1.概述 什么是变声器&#xff0c;变声器就是将语音特征进行转换&#xff0c;而语音内容不改变 那么我们如何构建一个变声器呢&#xff1f; 首先&#xff0c;我们肯定不能为转换的每一种风格的声…

JavaEE初阶——多线程(一)

T04BF &#x1f44b;专栏: 算法|JAVA|MySQL|C语言 &#x1faf5; 小比特 大梦想 此篇文章与大家分享多线程的第一部分:引入线程以及创建多线程的几种方式 此文章是建立在前一篇文章进程的基础上的 如果有不足的或者错误的请您指出! 1.认识线程 我们知道现代的cpu大多都是多核心…

【Figma】安装指南及基础操作

先前做UI设计一直都是用PS等绘图软件设计&#xff0c;但发现在纠结像素和排版问题上会花很多时间&#xff0c;再加上AI没来得及上手&#xff0c;就需要迅速出成图&#xff0c;此时通过论坛发现了figma&#xff0c;基本上可以满足足够的需求&#xff0c;并且可以在windows系统上…

【云开发笔记NO.27】分布式数据库

在云原生开发中&#xff0c;分布式数据库是一种特殊类型的数据库管理系统&#xff0c;其数据不是存储在单个集中的服务器上&#xff0c;而是分散在网络中的多个节点或服务器上。这种分散存储的方式使得分布式数据库具有很高的可扩展性、容错性和性能优势。云原生环境下的分布式…

SVG图标显示

SVG图标显示 1.安装SharpVectors.Wpf包 2.添加引用 xmlns:svgc"http://sharpvectors.codeplex.com/svgc/"3.加载svg文件&#xff0c;生成操作选择资源(Resource) 4.UI界面显示SVG图像 <Button Click"OnSaveFileClick" ToolTip"Save Svg File…

武汉星起航:跨境电商领域崭露头角,以实战经验引领行业新潮流

随着全球经济的演进&#xff0c;跨境电商正成为国际贸易的引擎&#xff0c;而武汉星起航电子商务有限公司凭借其丰富实战经验和专业团队&#xff0c;在这一领域取得了引人瞩目的成绩。公司成立于2020年&#xff0c;自2017年起紧紧围绕亚马逊自营店铺&#xff0c;致力于为合作伙…

基于Spring Boot+Vue的在线拍卖系统

随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单管理、…