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

在这里插入图片描述

文章目录

    • 前端性能指标和测量方法总结
      • 重要指标名词概念
      • 指标测量方法
        • 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,一经查实,立即删除!

相关文章

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

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

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

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

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

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

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

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

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

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

ElasticSearch 用法

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

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

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

Google研究者们提出了VLOGGER模型

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

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

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

babyos 学习记录

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

matlab矩形薄板小挠度弯曲有限元编程 |【Matlab源码+理论文本】|板单元| Kirchoff薄板 | 板壳单元

专栏导读 作者简介:工学博士,高级工程师,专注于工业软件算法研究本文已收录于专栏:《有限元编程从入门到精通》本专栏旨在提供 1.以案例的形式讲解各类有限元问题的程序实现,并提供所有案例完整源码;2.单元…

分库分表场景下多维查询解决方案(用户+商户)

在采用分库分表设计时,通过一个PartitionKey根据散列策略将数据分散到不同的库表中,从而有效降低海量数据下C端访问数据库的压力。这种方式可以缓解单一数据库的压力,提升了吞吐量,但同时也带来了新的问题。对于B端商户而言&#…

Layui实现删除及修改后停留在当前页

1、功能概述? 我们在使用layui框架的table显示数据的时候,会经常的使用分页技术,这个我们期望能够期望修改数据能停留在当前页,或者删除数据的时候也能够停留在当前页,这样的用户体验会更好一些,但往往事与…

硬核分享|如何将文字转成语音对视频进行配音或旁白解说

硬核分享|如何将文字转成语音对视频进行配音或旁白解说_哔哩哔哩_bilibili 文字转语音工具成为了一种便利而实用的技术应用,它能够将文字内容转化为声音,为我们提供全新的听觉体验。 不论是在阅读、学习、娱乐还是无障碍辅助等方面,文字转语…

【QT入门】 Qt槽函数五种常用写法介绍

声明:该专栏为本人学习Qt知识点时候的笔记汇总,希望能给初学的朋友们一点帮助(加油!) 往期回顾: 【QT入门】实现一个简单的图片查看软件-CSDN博客 【QT入门】图片查看软件(优化)-CSDN博客 【QT入门】 lambda表达式(函数)详解-CSDN…

苹果手机更换国内IP地址的方法

在网络世界中,IP地址扮演着极为重要的角色,是互联网通信的基础。很多人在使用苹果手机时,有时候需要更换国内IP地址以获取更多网络资源或保护隐私。那么,是否可以更换国内ip地址?苹果手机更换国内ip地址的方法是怎样的…

Redis学习二--常见问题及处理

基本概念 Redis基本概念数据结构 机制 持久化机制: RDB(内存快照):某一时刻的内存快照以二进制的方式写入磁盘,可以手动触发和自动触发。 优点:生成文件小,恢复速度快,适用于灾难恢复。 缺点&#xff1a…

Linux docker4--本地jar包生成镜像和docker部署运行

一、通过springboot创建一个java项目,打成出jar包。 二、将jar包生成docker镜像 (1)、创建Dockerfile文件 创建Dockerfile文件,将如下的代码内容粘贴进去即可。 注意:本例中我打出的jar包是boot.jar。如果你打出的jar…

百度小程序入口在哪里找到怎么打开百度词令关键词口令直达小程序?

百度小程序入口在哪里找到怎么打开百度词令关键词口令直达小程序? 一、百度搜索找到百度词令小程序 打开手机百度搜索「词令」即可找到百度词令关键词口令直达小程序; 二、百度小程序中心找到百度小程序 2.1、打开手机百度,点击底部我的&a…

SQLiteC/C++接口详细介绍sqlite3_stmt类(十三)

返回:SQLite—系列文章目录 上一篇:SQLiteC/C接口详细介绍sqlite3_stmt类(十二) 下一篇: 待续 51、sqlite3_stmt_scanstatus_reset sqlite3_stmt_scanstatus_reset 函数用于重置指定语句对象最近一次执行的 WHER…