前端 JS 经典:Web 性能指标

什么是性能指标:Web Performance Metrics 翻译成 Web 性能指标,一般和时间有关系,在短时间内做更多有意义的事情。

一个站点表现得好与不好,标准在于用户体验,而用户体验好不好,有一套 RAIL 模型来衡量。这个 RAIL 模型可以衡量一个站点用户体验到底好不好。那什么是 RAIL 模型勒,里面有 4 个单词:

| Response 响应:你这个网站的响应速度是不是足够的快。

| Animation 动画:你这站点的动画是不是足够丝滑,有没有跳帧,有没有丢帧。

| Idle 空闲:你这个站点是不是给用户留够了足够的空闲时间窗口,什么叫空闲,就这时间内没有什么 JS 代码运行,没有阻塞主线程,因为只有空闲时间足够,用户才能跟这个网站进行交互,不然你点一下就卡住了。

| Load 加载:页面上 DOM 元素过多,导致解析的时间变长,就会影响加载的时间。通过这四个方面进行整体的评价。

而 RAIL 模型是个模糊的概念,我们可以借助 LightHouse 可以将性能数据化。LightHouse 是浏览器很重要的插件,是对站点页面进行分析的插件,使用 f12 打开调试工具,并将调试工具漂浮起来,因为如果是附着状态会改变浏览器窗口大小,分析的时候就会不准。

 漂浮出来后,配置可以保持默认,直接点击按钮开始分析,分析的时候会刷新我们的页面,对整个页面的性能指标进行分析。

分析结果如下,博主的网站是有那么一点点瑕疵,需要优化一下。

 往下滑还可以看到一些具体的指标

要看懂这些指标,就需要知道这些指标什么意思。

First Contentful Paint 简称 FCP:首次内容绘制,就是白屏到第一次出现有意义的内容,这段时间就是 FCP。

Largest Contentful Paint 简称 LCP:最大内容绘制出来的时间,就是一个视口里面最大的元素往往是最重要的元素,最大元素出现的时间节点就需要去衡量它了。

Total Blocking Time 检查 TBT:指的是 FCP 期间,用户点击了按钮,但是页面没有完全加载,等到页面完全加载,然后页面对用户点击做出反应,这段时间叫 TBT,TBT 时间当然是越短越好。

Cumulative Layout Shift 简称 CLS:累计偏移,就比如你本来想点击一个按钮,点击的时候,又有一个按钮冒出来,让你要点击的按钮偏移下去了,点错了按钮。

Speed Index 简称 SI:总体的速度指标,是总体的综合衡量。

这些就是我们常见的 Web 性能指标,而现在这些指标都是实验室指标,那什么是实验室指标,就是这些性能指标是针对我们开发者的电脑、配置、浏览器的,而到用户那边,就可能有不同的结果。

所以实验室指标只能作为参考,真正有意义的指标是要去收集用户那一侧的数据,这就涉及到服务监控和数据埋点。就是我们写一段程序。注入到这个页面当中,当用户访问我们的站点的时候,那段代码就会在用户那端来进行运行,在运行的过程中就会收集用户的指标发送到我们数据监控的服务器,那怎么来收集勒,可以使用第三方 API,比如 Web Vitals。

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

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

相关文章

大专学历java能找到工作吗

就低学历就业的情况,大专学历的职业上限基本上是中小公司的开发小组长,中专或同等学历的职业上限一般是软件小作坊的项目经理。当下大专学历能进大公司的可能性不能说没,但相比前几年,少了太多。有稳定业务渠道的软件公司&#xf…

Vue.js功能实现博客

Vue.js功能实现博客 一、前言 Vue.js 是一款构建用户界面的渐进式框架。今天我们将通过一个简单的示例来展示如何使用 Vue.js 创建一个简单的计数器功能,并在此过程中解释每个步骤。 二、环境准备 在开始之前,请确保你的开发环境中已经安装了 Node.j…

音视频学习规划

文章目录 概述闲聊点 小结 概述 最近在学习音视频,觉得还是要先写个提纲,给自己制定下学习路线及目标。先写下我的个人流程及思路。 ffmpeg的命令ffmpeg api播放器流媒体RTMP,HLS 闲聊点 先说下学习命令行吧,学习命令行是为了…

GitHub的原理及应用详解(六)

本系列文章简介: GitHub是一个基于Git版本控制系统的代码托管平台,为开发者提供了一个方便的协作和版本管理的工具。它广泛应用于软件开发项目中,包括但不限于代码托管、协作开发、版本控制、错误追踪、持续集成等方面。 GitHub的原理可以简单…

Spring Cloud 项目在网关聚合 Swagger 文档

文章目录 Spring Cloud 项目在网关聚合 Swagger 文档各个微服务的改动改动一:新增依赖改动二:新增配置类关键项说明 Gateway 的改动改动一:新增依赖改动二:新增配置类和处理类改动三:改动配置文件 Spring Cloud 项目在…

一千题,No.0026(Ternary String)

描述 You are given a string s such that each its character is either 1, 2, or 3. You have to choose the shortest contiguous substring of s such that it contains each of these three characters at least once. A contiguous substring of string s is a string …

Python3 笔记:IDLE的几个基本设置

1、设置字体: Options > Configure IDLE > Fonts 2、设置文字颜色(设置高亮): Options > Configure IDLE > Highlights 3、设置背景颜色: Options > Configure IDLE > Highlights 4、设置窗口&a…

各位数字和-第13届蓝桥杯选拔赛Python真题精选

[导读]:超平老师的Scratch蓝桥杯真题解读系列在推出之后,受到了广大老师和家长的好评,非常感谢各位的认可和厚爱。作为回馈,超平老师计划推出《Python蓝桥杯真题解析100讲》,这是解读系列的第72讲。 各位数字和&#…

MongoDB(介绍,安装,操作,Springboot整合MonggoDB)

目录 MongoDB 1 MongoDB介绍 MongoDB简介 MongoDB的特点 MongoDB使用场景 小结 2 MongoDB安装 安装MongoDB 连接MongoDB MongoDB逻辑结构 MongoDB数据类型 小结 3 MongoDB操作 操作库和集合 操作文档-增删改 操作文档-查询 MongoDB索引 小结 4 SpringBoot整合…

c# sqlite使用

安装包 使用 const string strconn "Data Sourcedata.db"; using (SQLiteConnection conn new SQLiteConnection(strconn)) {conn.Open();var cmd conn.CreateCommand();cmd.CommandText "select 1";var obj cmd.ExecuteScalar();MessageBox.Show(ob…

ES 查询踩坑-全字段匹配

需求:name字段需要全匹配查询 name的映射 普通的must查询 GET power_engin/_search {"from": 0,"size": 10,"query": {"bool": {"must": [{"term": {"name": {"value": "尼…

刷题之路径总和Ⅲ(leetcode)

路径总和Ⅲ 这题和和《为K的数组》思路一致&#xff0c;也是用前缀表。 代码调试过&#xff0c;所以还加一部分用前序遍历数组和中序遍历数组构造二叉树的代码。 #include<vector> #include<unordered_map> #include<iostream> using namespace std; //Def…

python从入门到精通01

一、程序员计算器 number int(input("请输入一个数字&#xff1a;")) print("二进制",bin(number)) print("八进制",oct(number)) print("十六进制",hex(number))二、给电影打分 score int(input("请给电影《肖申克的救赎》打…

计算机毕业设计Hadoop+Hive地震预测系统 地震数据分析可视化 地震爬虫 大数据毕业设计 Spark 机器学习 深度学习 Flink 大数据

2024 届本科毕业论文&#xff08;设计&#xff09; 基于Hadoop的地震预测的 分析与可视化研究 姓 名&#xff1a;____田伟情_________ 系 别&#xff1a;____信息技术学院___ 专 业&#xff1a;数据科学与大数据技术 学 号&#xff1a;__2011103094________ 指导…

【大数据面试题】33 Flink SQL做过哪些优化?

一步一个脚印&#xff0c;一天一道面试题 简单写几个 Flink SQL 的优化 1.优化状态管理 Flink 的状态管理对整个程序的性能有较大影响。所以优化效果比较好。 设置空闲状态自动清理&#xff08;TTL Time-to-Live&#xff09;数据量大时选择 RocksDBStateBackend // 设置状…

《图解支付系统设计与实现》电子书_V20240525

相较于上次公开发布的V20240503版本&#xff0c;变更内容如下&#xff1a; 根据掘金网友zz67373&#xff08;李浩铭&#xff09;的勘误建议&#xff0c;优化了部分描述。增加&#xff1a;金额处理规范&#xff0c;低代码报文网关实现完整代码&#xff0c;分布式流控等内容。扩…

Java虚拟机原理(下)-Dalvik vs ART-探秘Android虚拟机内在机制

Android系统作为移动端主流平台&#xff0c;其高效的虚拟机无疑是其核心竞争力之一。今天&#xff0c;就让我们一起剥开Dalvik和ART虚拟机的外衣&#xff0c;深入解析它们的工作原理和优缺点&#xff0c;帮助你全面把握Android系统的运行机制。 正文导览 Dalvik和ART虚拟机的发…

Openstack all-in-one_ironic 部署测试

1. 基础环境 apt update apt install git python3-dev libffi-dev gcc libssl-dev apt install python3-venv 2. 设置虚拟环境变量 root@controller01:~# python3 -m venv /deploy/venv root@controller01:~# source /deploy/venv/bin/activate (venv) root@controller01:~#…

Nginx - 安全基线配置与操作指南

文章目录 概述中间件安全基线配置手册1. 概述1.1 目的1.2 适用范围 2. Nginx基线配置2.1 版本说明2.2 安装目录2.3 用户创建2.4 二进制文件权限2.5 关闭服务器标记2.6 设置 timeout2.7 设置 NGINX 缓冲区2.8 日志配置2.9 日志切割2.10 限制访问 IP2.11 限制仅允许域名访问2.12 …

debugger(一):打断点的实现以及案例分析

〇、前言 最近在学习 debugger 的实现原理&#xff0c;并按照博客实现&#xff0c;是一个很不错的小项目&#xff0c;这是地址。由于 macOS 的问题&#xff0c;系统调用并不完全相同&#xff0c;因此实现了两个版本分支&#xff0c;一个是 main 版本分支&#xff08;macOS M1 …