当前位置: 首页 > news >正文

前端 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。

相关文章:

前端 JS 经典:Web 性能指标

什么是性能指标:Web Performance Metrics 翻译成 Web 性能指标,一般和时间有关系,在短时间内做更多有意义的事情。 一个站点表现得好与不好,标准在于用户体验,而用户体验好不好,有一套 RAIL 模型来衡量。这…...

SVN创建分支,分支合并,切换分支。通俗易懂

1、首先在svnbucket.com远程仓库上创建项目,这里我创建了个测试demo: 2、先把svn仓库的项目检出到自己的文件夹,我这里是demo001文件夹,此时并没有创建truck, branches, tags这三个目录: 3、 在demo001文件夹里新建tru…...

【编译原理复习笔记】中间语言

中间语言 中间语言的特点和作用 (1)独立于机器 (2)复杂性介于源语言和目标语言之间 中间语言可以使编译程序的结构在逻辑上更为简单明确 常用的中间语言 后缀式 图表示:抽象语法树,有向无环图 三地址代…...

linux笔记6--shell相关

文章目录 1. 查看当前的shell类型2. ps -f命令3. 父子shell4. 分号在命令里的作用问题:环境变量echo: 5. sleep和jobssleep:jobs:例子:&: 6. 外部命令和内建命令图解外部命令type命令 7. history命令8. alias命令9. 推荐 1. 查看当前的sh…...

链表-线性表的链式表示

链表-线性表的链式表示 #mermaid-svg-ozpXrKnNCyYdqHvN {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ozpXrKnNCyYdqHvN .error-icon{fill:#552222;}#mermaid-svg-ozpXrKnNCyYdqHvN .error-text{fill:#552222;stro…...

GNU/Linux - 时区设置

CST China Standard Time 北京时间/中国标准时间 在时区划分上,属东八区,比协调世界时早 8 小时,记为 UTC8 GMT Greenwich Mean Time 格林威治标准时间 是指位于英国伦敦郊区的格林尼治天文台的标准时间,因为本初子午线被定…...

红队攻防渗透技术实战流程:云安全之云原生安全:内核漏洞和版本漏洞

红队云攻防实战 1. 云原生安全 -Docker安全-容器逃逸-版本漏洞1.1 容器逃逸-版本漏洞-runC容器逃逸1.2 实战案例-版本漏洞-runC容器逃逸1.3 容器逃逸-版本漏洞-containerd逃逸1.4 实战案例-版本漏洞-containerd逃逸1.5 Docker安全-容器逃逸-CDK自动化1.6 Docker安全-容器逃逸-c…...

spring状态机实战

一、什么是状态机 状态机是有限状态自动机的简称,是现实事物运行规则抽象而成的一个数学模型,是一种概念性机器,它能采取某种操作来响应一个外部事件。这种操作不仅能取决于接收到的事件,还能取决于各个事件的相对发生顺序。状态…...

Ubuntu系统上安装NVIDIA驱动【笔记】

Ubuntu上安装NVIDIA驱动,您可以按照以下步骤操作: 首先,您需要配置软件源(根据情况配置,否则影响更新和下载速度)。 接下来,您可以按照上一条回答中的步骤来安装新的NVIDIA驱动。首先&#xff…...

生成式AI导论2024-李宏毅

生成式AI导论2024-李宏毅 第0讲: 课程说明第1讲:生成式AI是什么第2講:今日的生成式人工智慧厲害在哪裡?從「工具」變為「工具人」 第0讲: 课程说明 生成式AI的入门课程 第1讲:生成式AI是什么 生成式人…...

跨平台之用VisualStudio开发APK嵌入OpenCV(三)

本篇将包含以下内容: 1.使用 Visual Studio 2019 开发一个 Android 的 App 2.导入前篇 C 编译好的 so 动态库 3.一些入门必须的其它设置 作为入门,我们直接使用真机进行调试,一方面运行速度远高于模拟器,另一方面模拟器使用的…...

渗透测试框架之CobaltStrike,Metasploit域名上线隐藏IP

概述 为什么要隐藏IP 在拿下了目标机之后,目标机在内网里面,使用msf或者CS时,用自己的VPS做服务器的话,导致很容易被溯源。 域名上线原理 当我们访问域名时会经过域名解析 域名解析就是域名到IP地址的转换过程,那么…...

vue.js对接海康威视摄像头web开发包

一、登录海康开放平台下载web开发包,下载需要先登录海康账号,没有的需先注册一个。 这里的appkey、ip、port、secret 和cameraIndexCodeasd是自己去申请的 appkey: "****", ip: "****", port: **, secret: "****", //必填…...

Selenium中使用的三种等待

文章目录 1.前言2.在selenium中常见的等待操作一般有3个 1.前言 在使用selenium时很多元素在使用的时候都需要加载,如果不等待加载结束直接使用就会报错,功能不能继续。一般解决的办法就是使用等待操作。 2.在selenium中常见的等待操作一般有3个 slee…...

推荐一款媒体影音嗅探神器—Chrome扩展插件(猫抓cat-catch)

目录 1.1、前言1.2、下载地址1.3、github Releases 版本说明1.4、安装步骤1.5、猫抓插件常规设置1.5.1、设置抓取文件的类型1.5.2、设置抓取文件的后缀名 1.1、前言 我们在日常上网的过程中,很多音频、视频网站下载资源都非常不方便,要么需要安装客户端&…...

LLaMA-Factory 微调训练

LLaMA-Factory 微调训练 该框架功能,标注-微调-导出-合并-部署,一整条流程都有,而且训练时消耗的gpu算力也会小一些 一,安装(推荐在linux中训练,win可以用wsldocker) git clone https://githu…...

阿里云ECS服务器怎么设置时区

在自己部署在阿里云服务器上的应用中,控制台打印的日志时间和本地不一致,于是决定修改阿里云服务器的时区为Asia/Shanghai。 具体操作如下: 第一步:连接服务器 通过finalshell等连接工具通过公网IP连接到服务器。 第二步&#…...

【698协议】帧校验算法

698协议,帧校验算法 帧格式 帧校验范围 校验算法 #include "fcs16.h" /* * u16 represents an unsigned 16-bit number. Adjust the typedef for * your hardware. * Drew D. Perkins at Carnegie Mellon University. * Code liberally borrowed from M…...

FileZilla“服务器发回了不可路由的地址,使用服务器地址代替

问题:在宝塔创建的FTP无法使用,提示“服务器回应不可路由的地址。使用服务器地址代替 第一种解决办法:由于宝塔把FTP被动模式端口范围设置成了39000-40000,所以只需要把阿里云服务器上相应的端口范围开放即可。 第二种解决办法&am…...

【路径规划】基于遗传算法GA实现最短距离 多起点多终点多旅行商问题求解附Matlab代码

基于遗传算法GA实现最短距离 多起点多终点多旅行商问题求解 研究背景:研究步骤:研究方法和技术路线:代码研究背景: 多起点多终点多旅行商问题是旅行商问题(TSP)的一个扩展,该问题要求确定多个旅行商从各自的起点出发,分别经过一系列目标点最终回到各自的终点,使得总路…...

docker详细操作--未完待续

docker介绍 docker官网: Docker:加速容器应用程序开发 harbor官网:Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台,用于将应用程序及其依赖项(如库、运行时环…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件: 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...

【2025年】解决Burpsuite抓不到https包的问题

环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架,用于…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder ,其中 inorder 是二叉树的中序遍历, postorder 是同一棵树的后序遍历,请你构造并返回这颗 二叉树 。 示例 1: 输入:inorder [9,3,15,20,7…...

基于小程序老人监护管理系统源码数据库文档

摘 要 近年来,随着我国人口老龄化问题日益严重,独居和居住养老机构的的老年人数量越来越多。而随着老年人数量的逐步增长,随之而来的是日益突出的老年人问题,尤其是老年人的健康问题,尤其是老年人产生健康问题后&…...

开疆智能Ethernet/IP转Modbus网关连接鸣志步进电机驱动器配置案例

在工业自动化控制系统中,常常会遇到不同品牌和通信协议的设备需要协同工作的情况。本案例中,客户现场采用了 罗克韦尔PLC,但需要控制的变频器仅支持 ModbusRTU 协议。为了实现PLC 对变频器的有效控制与监控,引入了开疆智能Etherne…...