【前端性能】前端性能指标和测量方法总结

在这里插入图片描述

文章目录

    • 前端性能指标和测量方法总结
      • 重要指标名词概念
      • 指标测量方法
        • performance API
        • Chrome Performance
        • Chrome Lighthouse
        • web-vitals

前端性能指标和测量方法总结

重要指标名词概念

在这里插入图片描述

图源 https://dev.to/xnimorz/hitchhiker-s-guide-to-frontend-performance-optimization-4607

FP: First Paint 首次绘制,指浏览器从开始请求网站内容到绘制第一个像素点的时间,也可以理解为白屏时间。

FCP: First Contentful Paint 首次内容绘制,从开始加载到绘制出第一个内容的时间,内容为文本、图片或 SVG CANVAS 元素。

(FMP: First Meaning Paint 现已被 LCP 取代)
LCP: Largest Contentful Paint,最大内容绘制,指可视区内容最大的可见元素出现在屏幕上的时间,衡量加载性能的核心指标。最好是在2.5s内。

(TTI: Time to Interactive,可交互时间。简单的讲,TTI 是安静窗口之前最后一个长任务超过 50 毫秒的任务的结束时间,如果没有找到长任务,则与 FCP 值相同。最好是在3.9 秒内。因为用户交互会影响 TTI,页面在实际情况中的交互性,应该测量 FID。)
FID: First Input Delay,首次输入延迟,测量从用户第一次与页面交互直到浏览器对交互作出响应的时间,FID 是衡量交互性的核心指标。最好是在100毫秒内。

CLS: Cumulative Layout Shift,累积布局偏移。页面因为一些动态改变的 DOM 或者一些异步的资源加载,导致页面元素发生了位移,这样就会让用户找不到先前阅读的位置或者点击到不期望点击的地方。是衡量视觉稳定性的核心指标。最好是在0.1内。

指标测量方法

performance API

在这里插入图片描述

可以直接打印 console.log(window.performance);
其中memory关注内存使用情况,navigation关注重定向情况,主要性能指标看timing。
里面时间点很多,在这里简单写两个介绍下,到时候需要测性能再去看具体要测的部分。
DNS解析耗时 : performance.timing.domainLookupEnd - performance.timing.domainLookupStart
TCP连接耗时 : performance.timing.connectEnd - performance.timing.connectStart
SSL连接耗时 : performance.timing.connectEnd - performance.timing.secureConnectionStart
request耗时 : performance.timing.responseEnd - performance.timing.responseStart
解析DOM树耗时 : performance.timing.domComplete - performance.timing.domInteractive

performance.getEntries() : 以对象数组的方式返回所有资源的数据
在这里插入图片描述

例如:
TTFB 首包时间: 包括 重定向 + DNS + TLS + 请求 直到响应第一个字节到达。

performance.timing.responseStart - performance.timing.navigationStartconst [pageNav] = entryList.getEntriesByType('navigation')
console.log(`TTFB: ${pageNav.responseStart}`)

FCP 首屏内容时间

performance.getEntriesByName("first-contentful-paint")[0].startTime

FP 白屏时间

performance.getEntriesByName("first-paint")[0].startTime
Chrome Performance

Chrome 控制台的 Performance 页签,包括 FP LCP 等,无法测量 CLS FID 等。
在这里插入图片描述

Chrome Lighthouse

可以直接生成报告,包括 FCP LCP TBT CLS 等指标,无法测量 FID。
在这里插入图片描述
在这里插入图片描述

web-vitals

测量性能的第三方库。

import { getLCP, getFID, getCLS } from 'web-vitals'
getCLS((metric) => console.log('cls: ' + metric.value))
getFID((metric) => console.log('fid: ' + metric.value))
getLCP((metric) => console.log('lcp: ' + metric.value))

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

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

相关文章

在Windows检查打开的TCP/IP端口可以使用内置工具,也可以使用第三方应用程序

前言 每当应用程序希望通过网络访问自己时,它都会声明TCP/IP端口,这意味着该端口不能被其他任何东西使用。那么,如何检查打开的端口以查看哪些应用程序已经在使用它? 我们已经测试了该过程,并确认所有步骤都是最新的,并且它们也都可以在Windows 11中工作。 端口如何工…

计算机+任何行业都等于王炸!

最近笔者刷到一则消息,一位测试员在某乎上分享,从月薪5K到如今的20K,他总共跳了10次槽,其中还经历过两次劳动申诉,拿到了大几万的赔偿,被同事们称为“职场碰瓷人”。 虽说这种依靠跳槽式的挣钱法相当奇葩&a…

Java微服务分布式事务框架seata的TCC模式

🌹作者主页:青花锁 🌹简介:Java领域优质创作者🏆、Java微服务架构公号作者😄 🌹简历模板、学习资料、面试题库、技术互助 🌹文末获取联系方式 📝 往期热门专栏回顾 专栏…

3/21作业

#include <myhead.h> int do_add(sqlite3 *ppDb) { int add_numb 0; char add_name[20] {0}; double add_score 0; printf("请输入学号:"); scanf("%d",&add_numb); printf("请输入姓名:"); scanf(&q…

Python机器学习019:sklearn中如何找到测试集中预测错误的样本在原数据中所在的索引位置

原理 要查看预测错误的 X_test 在原始数据集中的索引,你可以首先找到预测错误的样本索引,然后将这些索引映射回原始数据集的索引。 案例 from sklearn.model_selection import train_test_split from sklearn.linear_model import LogisticRegression from sklearn.metric…

鸿蒙ArkTS实战开发-Native XComponent组件的使用

介绍 本篇Codelab主要介绍如何使用XComponent组件调用NAPI来创建EGL/GLES环境&#xff0c;实现在主页面绘制一个正方形&#xff0c;并可以改变正方形的颜色。本篇CodeLab使用Native C模板创建。 如图所示&#xff0c;点击绘制矩形按钮&#xff0c;XComponent组件绘制区域中渲…

Sketch软件:重塑UI/UX设计流程的革命性工具

Sketch是一款在Mac操作系统上运行的矢量图形设计软件&#xff0c;其功能特色丰富多样&#xff0c;深受设计师们的喜爱。以下是Sketch软件的主要功能特色介绍&#xff1a; 专业矢量图形设计&#xff1a;Sketch为UI设计、移动应用设计和Web设计等领域提供了强大的支持。它支持线条…

了解OGC

什么是OGC OGC&#xff08;Open Geospatial Consortium&#xff09;是一个国际性的组织&#xff0c;专注于制定和发布开放的地理信息标准&#xff0c;以促进地理空间数据和服务的互操作性和共享。其目标是在全球范围内推动地理信息系统&#xff08;GIS&#xff09;和地理空间技…

串口控制LED灯

uart.c #include "uart4.h"void uart4_init() {//使能GPIOB GPIOG UART4外设时钟RCC->MP_AHB4ENSETR | (0x1<<1);//GPIOBRCC->MP_AHB4ENSETR | (0x1<<6);//GPIOGRCC->MP_APB1ENSETR | (0X1<<16);//UART4//设置PB2和PG11管脚复用//PB2GPI…

即时编译器在JVM调优战场的决胜策略

目录 一、方法内联 二、循环展开 三、分支预测 四、逃逸分析 4.1 栈上分配 4.2 标量替换 4.3 同步消除 五、冗余消除 JVM中的即时编译器&#xff08;如HotSpot的C1、C2编译器&#xff09;会对代码进行即时编译优化&#xff0c;即时编译优化&#xff08;Just-In-Time Compi…

【JavaScript 中的数据类型】

JavaScript 中的基本数据类型 基本数据类型 数字&#xff08;Number&#xff09;&#xff1a;用于表示数字&#xff0c;包括整数和浮点数。字符串&#xff08;String&#xff09;&#xff1a;用于表示文本数据。布尔值&#xff08;Boolean&#xff09;&#xff1a;用于表示逻…

数据结构奇妙旅程之线性表

线性表&#xff08;Linear List&#xff09;是数据结构中的一种基本类型&#xff0c;它代表了具有相同类型数据元素的一个有限序列。线性表中的数据元素之间是一对一的关系&#xff0c;即除了第一个元素外&#xff0c;每个元素有且仅有一个前驱元素&#xff1b;除了最后一个元素…

Hive常用函数 之 数值处理

Hive常用函数 之 数值处理 以下是Hive中常用的数值处理函数&#xff0c;可用于执行各种数学运算和数值转换操作。 1. ABS()&#xff1a;返回一个数的绝对值。 SELECT ABS(-10); -- 输出: 102. ROUND()&#xff1a;对一个数进行四舍五入。 SELECT ROUND(10.56); -- 输出: 113.…

探索ChatGPT时代下的下一代信息检索系统:机遇与挑战

1 Introduction 2022 年 11 月 30 日&#xff0c;OpenAI 推出了 ChatGPT&#xff0c;这是一款由先进的 GPT3.5 和更高版本的 GPT-4 生成语言模型提供支持的 AI 聊天机器人应用程序。该应用迅速吸引了全球超亿用户&#xff0c;创下了产品快速传播的新纪录。 它能够以对话的方式…

ElasticSearch 用法

首先讲下 ES的倒排序索引 创建倒排索引是对正向索引的一种特殊处理&#xff0c; 将每一个文档的数据利用算法分词&#xff0c;得到一个个词条 创建表&#xff0c;每行数据包括词条、词条所在文档id、位置等信息 因为词条唯一性&#xff0c;可以给词条创建索引&#xff0c;例如…

旅游小程序开发的费用及功能

随着科技的发展和智能手机的普及&#xff0c;越来越多的行业开始利用小程序来进行线上服务。旅游业作为一个重要的服务业&#xff0c;也纷纷推出了自己的旅游小程序&#xff0c;以方便游客在线预订、查询景点信息等。那么&#xff0c;旅游小程序开发的费用是多少&#xff1f;功…

Google研究者们提出了VLOGGER模型

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

【探索Linux】—— 强大的命令行工具 P.29(网络编程套接字 —— 简单的TCP网络程序模拟实现)

阅读导航 引言一、TCP协议二、TCP网络程序模拟实现1. 预备代码⭕ThreadPool.hpp&#xff08;线程池&#xff09;⭕makefile文件⭕打印日志文件⭕将当前进程转变为守护进程 2. TCP 服务器端实现&#xff08;TcpServer.hpp&#xff09;3. TCP 客户端实现&#xff08;main函数&…

babyos 学习记录

宏定义头文件 将一个宏定义取不同的数据到不同的数组中&#xff1b; 侵入式链表 struct list_head { struct list_head *next, *prev; }; // 添加&#xff08;list_add_tail/list_add&#xff09;、删除、查找 xx.h // 定义一个用于链表管理的结构体 typedef sturct{ xxx …

探索数据库的世界:分类、作用与特点

数据库是现代信息时代的基础设施之一&#xff0c;它是一种组织、存储、管理和检索数据的系统。数据库在各个领域都有着广泛的应用&#xff0c;如企业、政府、医疗、金融等&#xff0c;它可以帮助企业和组织高效地管理和分析数据&#xff0c;从而做出更好的决策。本文将介绍数据…