【性能】如何计算 Web 页面的 FP 指标

什么是 FP 指标

FP (First Paint) 为首次渲染的时间点,在性能统计指标中,从用户开始访问 Web 页面的时间点到 FP 的时间点这段时间可以被视为 白屏时间,也就是说在用户访问 Web 网页的过程中,FP 时间点之前,用户看到的都是没有任何内容的白色屏幕,用户在这个阶段感知不到任何有效的工作在进行。

FP 指标通常会反映页面的白屏时间,而白屏时间会反映当前 Web 页面的网络加载性能情况,当加载性能非常良好的情况下,白屏的时间就会越短,用户等待内容的时间就会越短,流失的概率就会降低。

如何获取 FP 指标

  • 用户访问 Web 页面,通常会有两种模式:
  • 直接通过服务端路由切换的同步跳转场景;
  • 通过客户端路由跳转的 SPA 页面切换场景;

同步跳转场景

  • 通过 W3C Paint Timing 规范草案 中的描述, PerformancePaintTiming API 可以直接获取当前 Web 页面的绘制性能打点信息,FP 就在其中。
  • 在浏览器实现中,可以通过 performance.getEntriesByType(‘paint’) 方法获取 PerformancePaintTiming API 提供的打点信息,找到 name 为 first-paint 的对象,描述的即为 FP 的指标数据,如下图所示:

在这里插入图片描述

其中 startTime 即为 FP 时间。

SPA 切换场景

  • FP 指标不适用
  • SPA 切换场景,一般页面一直处于有内容状态,首次渲染的概念意义不大,且难以准确定义,因此不上报该指标。

如何优化 FP 指标

  • 优化 FP 指标,关键是缩短资源的下载时间,以及减少阻塞浏览器渲染 DOM 的任务的执行时间。常见方法有:
  • 减少外链 CSS 资源的数量 。
  • 减少同步加载的外链 JS 资源数量。
  • 合理使用 HTTP 缓存。
  • 压缩静态资源。
  • 优化页面加载过程中的 JS 执行时间。

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

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

相关文章

KeyarchOS的CentOS迁移实践:使用操作系统迁移工具X2Keyarch V2.0

KeyarchOS的CentOS迁移实践:使用操作系统迁移工具X2Keyarch V2.0 作者: 猫头虎博主 文章目录 KeyarchOS的CentOS迁移实践:使用操作系统迁移工具X2Keyarch V2.0🐅摘要引言1. 迁移前的精心准备1.1 系统环境介绍1.2 深度数据验证1.2.…

js制作动态表单

JS制作动态表单&#xff0c;可以通过以下步骤实现&#xff1a; HTML布局&#xff1a;在HTML中创建一个表单元素&#xff0c;并设置一个ID属性。 <form id"myForm"><label for"name">姓名&#xff1a;</label><input type"text…

Maven编译报错:javacTask: 源发行版 1.8 需要目标发行版 1.8

报错截图&#xff1a; IDEA中的jdk检查都正常设置的1.8一点毛病没有。参考其他帖子链接如下&#xff1a; https://blog.csdn.net/zhishidi/article/details/131480199https://blog.51cto.com/u_16213460/7197764https://blog.csdn.net/lck_csdn/article/details/125387878 逐…

Vue指令修饰符、v-bind、v-model、computed计算属性、watch侦听器

前言 持续学习总结输出中&#xff0c;Vue指令修饰符、v-bind、v-model、computed计算属性、watch侦听器 一、指令修饰符 1.什么是指令修饰符&#xff1f; 所谓指令修饰符就是通过“.”指明一些指令后缀 &#xff0c;不同的后缀封装了不同的处理操作 —> 简化代码 2.按键…

LeetCode算法题解(动态规划)|LeetCode509. 斐波那契数、LeetCode70. 爬楼梯、LeetCode746. 使用最小花费爬楼梯

一、LeetCode509. 斐波那契数 题目链接&#xff1a;509. 斐波那契数 题目描述&#xff1a; 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#xff1a…

LeetCode(29)三数之和【双指针】【中等】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 三数之和 1.题目 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复…

Android 13.0 Launcher3仿ios长按app图标实现抖动动画开始拖拽停止动画

1.概述 在13.0的系统rom定制化开发中,在对系统原生Launcher3的定制需求中,也有好多功能定制的,在ios等电子产品中 的一些好用的功能,也是可以被拿来借用的,所以在最近的产品开发需求中,需求要求模仿ios的 功能实现长按app图标实现抖动动画,接下来看如何分析该功能的实现…

电子学会2023年6月青少年软件编程(图形化)等级考试试卷(二级)真题,含答案解析

青少年软件编程(图形化)等级考试试卷(二级) 一、单选题(共25题,共50分) 1. 运行下列哪段程序,可以让狗狗走到木屋门口?( ) A.

微信第三方平台开发重点概念流程梳理

标题 微信开发的亿点点概念第三方平台代开发流程亿些概念开发流程 代公众号使用JS SDK一些概念具体流程引用 微信开发的亿点点概念 AppID&#xff1a;AppID是不同类型的产品的账号ID,是账号的唯一标识符。例如公众号的AppID、小程序的AppID、开放平台的AppID、第三方平台的App…

OceanBase:Zone管理

OceanBase 集群由若干个 Zone 组成。从物理层面来讲&#xff0c;一个 Zone 通常是一个独立的物理部署单元&#xff0c;可以是一个数据中心&#xff08;IDC&#xff09;或者云上的一个 Zone&#xff08;可用区&#xff09;&#xff0c;也可以是一个单独的机架&#xff08;Rack&a…

2023.11.15 hive sql之函数标准,字符串,日期,数学函数

目录 一.函数分类标准 二.查看官方函数,与简单演示 三.3种类型函数演示 四.字符串函数 1.常见字符串函数 2.索引函数 解析函数 五.日期函数 1.获取当前时间 2.获取日期相关 3.周,季度等计算 4.时间戳 六.数学函数 一.函数分类标准 目前hive三大标准 UDF:&#xff08…

Linux系统上导出和导入MongoDB数据库

在Linux系统上&#xff0c;你可以使用mongodump和mongorestore命令来导出和导入MongoDB数据库。以下是简要的步骤&#xff1a; 导出MongoDB数据库 使用mongodump命令来导出数据库&#xff0c;该命令将数据库的数据和索引以二进制形式存储在指定的目录中。 mongodump --db yo…

Apache Hive源码阅读环境搭建

前置软件&#xff1a; JDK 1.8 Maven 3.3.9 1 下载源码 # 下载源码 git clone https://github.com/apache/hive.gitcd hive# 查看标签 git tag# 切换到要阅读的指定版本的tag git checkout rel/release-2.1.02 编译源码 mvn clean install -DskipTests执行报错 日志如下 E…

VisualBox7.0.12 主机和宿舍互PING设置

设置成桥接模式 主机设置 虚拟机设置

搜索引擎ElasticSearch分布式搜索和分析引擎学习,SpringBoot整合ES个人心得

ElasticSearch Elasticsearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎&#xff0c;基于RESTful web接口。Elasticsearch是用Java语言开发的&#xff0c;并作为Apache许可条款下的开放源码发布&#xff0c;是一种流行的企业级搜索引擎。Elas…

stable diffusion到底是如何工作的

stable diffusion简单入门 stable diffusion是一个文生图模型&#xff0c;主要由CompVis、Stability AI和LAION的研究者们创建。这个模型主要是在512X512分辨率的图像上训练的&#xff0c;训练数据集是LAION-5B&#xff0c;该数据集是目前可访问的最大的多模态数据集。 在这篇…

Android---网络编程优化

网络请求操作是一个 App 的重要组成部分&#xff0c;程序大多数问题都是和网络请求有关。使用 OkHttp 框架后&#xff0c;可以通过 EventListener 来查看一次网络请求的详细情况。一次完整的网络请求会包含以下几个步骤。 也就是说&#xff0c;一次网络请求的操作是从 DNS 解析…

【PostgreSQL】日期操作

1、获取当前日期的函数和当前时间的函数 使用日期函数获取系统当期日期&#xff0c;输入语句如下&#xff1a; SELECT CURRENT_DATE;使用时间函数获取系统当期日期(返回时带时区)&#xff0c;输入语句如下&#xff1a; SELECT CURRENT_TIME;使用时间函数获取系统当期日期(返…

C++类与对象(1)—初步认识

目录 一、面向过程和面向对象 二、类 1、定义 2、类的两种定义方式 3、访问限定符 4、命名规范化 5、类的实例化 6、计算类对象的大小 7、存储方式 三、this指针 1、定义 2、存储位置 3、辨析 四、封装好处 一、面向过程和面向对象 C语言是面向过程的&#xf…

4.6每日一题(多元函数的隐函数求导)

三元方程确定的二元函数类型的隐函数 方法一&#xff1a;两边对x求偏导&#xff0c;把y看成常数 注&#xff1a;z可以把x和y同时代入求出答案 方法二&#xff1a;带公式