前端web性能统计

前端web性能统计

  • 1. 背景
  • 2. 业界方案
    • 2.1 腾讯
    • 2.2 蚂蚁金服
    • 2.3 字节跳动
    • 2.4 美团
  • 3. 相关观念
    • 3.1 RAIL模型
    • 3.2 性能指标
    • 3.3 真实用户监控
    • 3.4 performance
  • 4. 性能监控工具介绍
  • 5. 推荐采用方案

1. 背景

在如今的数字时代,网站和应用程序的性能对用户体验至关重要。用户希望快速加载的页面和流畅的交互,而web前端性能监控是确保这一目标实现的关键。了解关键指标有哪些,对优化web前端性能而言至关重要。

2. 业界方案

2.1 腾讯

参考:腾讯前端团队是如何做web性能监控的?

  • Google开发者提出的指标;
  • Lighthouse、PageSpeed等性能检测工具;
  • performance收集用户真实数据;
  • 收费类sdk集成到前端收集用户真实数据;

2.2 蚂蚁金服

参考:蚂蚁金服如何把前端性能监控做到极致?

  • 合成监控(Synthetic Monitoring,SYN),用的Lighthouse
  • 真实用户监控(Real User Monitoring,RUM),使用performance
  • 定义的指标跟Google指标类似

2.3 字节跳动

参考:应用性能前端监控,字节跳动这些年经验都在这了

  • Web Vitals 定义了 LCP、FID、CLS 指标

基于长期以来的体验指标优化积累,最新的核心体验指标主要专注于加载、交互、视觉稳定,加载的速度决定用户是否可以尽早访问到视觉上的图像,可交互的速度则决定用户心理上是否可以尽快感觉页面上的元素可以操作,而视觉稳定性则负责衡量页面的视觉抖动对用户造成的负面影响。

2.4 美团

参考:美团性能分析框架和性能监控平台

  • 主文档加载速度,利用 Navigation Timing API 取得;
  • 静态资源加载速度,利用 Resource Timing API 取得;
  • 首次渲染速度,IE 下用 msFirstPaint 取得,Chrome 下利用 loadTimes 取得,我们的 Chrome 浏览器用户占比超过 70%;
  • 文档生成速度,则是在后端应用内打点来获得;

3. 相关观念

3.1 RAIL模型

参考:使用 RAIL 模型衡量性能

RAIL 的含义是 Response响应、Animation动画、Idle空闲、Load加载,分别代表着 web 应用生命周期的四个不同方面。

RAIL 是一种以用户为中心的性能模型,提供考虑性能的结构。该模型会将用户体验细分为关键操作(例如点按、滚动、加载),并帮助开发者为每项操作定义性能目标。

3.2 性能指标

参考:核心网页指标

Google 开发者针对用户体验,提出的几个性能指标:

  • LCP (Largest Contentful Paint) :最大内容绘制,测量加载性能。为了提供良好的用户体验,LCP 应在页面首次开始加载后的2.5 秒内发生。
  • FID (First Input Delay) :首次输入延迟,测量交互性。为了提供良好的用户体验,页面的 FID 应为100 毫秒或更短。
  • CLS (Cumulative Layout Shift) :累积布局偏移,测量视觉稳定性。为了提供良好的用户体验,页面的 CLS 应保持在 0.1. 或更少。

在这里插入图片描述

文中还介绍说明了一些 其他指标。

  • FCP (First Contentful Paint)首次内容绘制,指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。
  • TTFB (Time To First Byte),是最初的网络请求被发起到从服务器接收到第一个字节这段时间,它包含了 TCP连接时间,发送HTTP请求时间和获得响应消息第一个字节的时间。

3.3 真实用户监控

真实用户监控是一种被动监控技术,是一种应用服务,被监控的 web 应用通过 sdk 等方式接入该服务,将真实的用户访问、交互等性能指标数据收集上报、通过数据清洗加工后形成性能分析报表。例如 FrontJs、oneapm、Datadog 等。
(遗憾的是这几种sdk基本上都是收费的)

web-vitals也算是真实用户监控的一种。

优点:

  • 是真实用户访问情况。
  • 可以观察历史性能趋势。
  • 有一些额外的功能:报表推送、监控告警等等。

缺点:

  • 有侵入性,会一定程度上响应 web 性能。

3.4 performance

参考: MDN Web Docs 社区 Performance

在讲如何监控之前,先来看看浏览器提供的 performance api,这也是性能监控数据的主要来源。
performance 提供高精度的时间戳,精度可达纳秒级别,且不会随操作系统时间设置的影响。
目前市场上的支持情况:主流浏览器都支持,大可放心使用。

真实用户监控上报的注意事项: 参考文档 如何进行 web 性能监控?

  • 耗时统计使用 performance.now(),而不是 Date(),因为Date会依赖系统时间,修改了系统时间后,统计数据就不对了;更多的是performance从定义开始就是高精度
  • 数据上报使用navigator.sendBeacon,不要用Ajax等其他库,sendBeacon不会阻塞页面或者其他;

4. 性能监控工具介绍

工具适用方式分析
PageSpeed Insights 网页速度测量工具 PSIPSI 可在网页上使用;
也可作为API使用;
并不是通过打点、监控上报的方式,作为页面性能分析工具很强大;
搜索控制台 Google Search Console非常适合用来识别需要改进的特定页面。与 PageSpeed Insights 不同,搜索控制台的报告包括历史性能数据。(针对您拥有并已验证所有权的网站使用搜索控制台)没有尝试
CrUX 仪表板跟PSI类似;同时可以结合一些工具去做数据上报到Google后台。报告包含更多维度,数据可以按设备和连接类型进行细分。维度包括2G/3G等
Web 指标 Chrome 扩展程序直接Chrome启动扩展程序观测;可以进行在本机简单的性能分析;无法查看其他用户和历史数据;
Lighthouse灯塔 推荐扩展程序;命令行工具,可集成到持续集成系统有不少基于这个的收费服务,做监控的;
报告很强大,能产生很多优化建议;
WebPageTest 网页性能测试工具网页上输入网址测试;官网排队等待太慢了
Pingdom不仅提供合成监控,也提供真实用户监控。优点:无侵入性;简单快捷。
缺点:不是真实的用户访问情况,只是模拟的;没法考虑到登录的情况,对于需要登录的页面就无法监控到。
web-vitals (js库)推荐直接在前端项目里加载直接收集指标数据;上报的后端有多种方式;简单的代码开发进行收集上报;在单页面应用上有局限性;

5. 推荐采用方案

针对不同服务带来的不同场景,可参考自身需求选择对应工具,这里推荐如下做法:

  • 使用web-vitals (js库)在前端采集真实用户监控,收集 LCP、FID、CLS
  • 针对性的对关键页面,通过Lighthouse插件手动生成性能报告;

采集指标数据可以还包含以下数据,便于我们更好的分析页面和用户行为的关系:

  • navigator.userAgent 用户浏览器信息
  • navigator.platform 设备
  • location: origin, pathname, hash, href 地址栏信息
  • user用户唯一标识
  • client ip 客户端IP

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

13_Shell系统函数

13_Shell系统函数和自定义函数 一、系统函数 basename 获取文件名 #!/bin/bash#basename 相对路径文件名 basename ./1.sh#basename 绝对路径文件名 basename /tmp/1.sh#basename 去除文件后缀名 basename /tmp/1.sh .shdirname 获取文件所在目录名 #!/bin/bash#dirname 相对路…

【web】-sql注入-login

根据网址提示打开如图: 查看源代码前台并没有过滤限制、扫描后台也没有发现特殊文件。看到标题显示flag is in database,尝试sql注入。 由于post,bp抓包如下: 运行python sqlmap.py -r 1.txt --dump 获取flag 42f4ebc342b6ed4af4aadc1ea75f…

在word中删除endnote参考文献之间的空行

如图,在References中,每个文献之间都有空行。不建议手动删除。打开Endnote。 打开style manager 删除layout中的换行符。保存,在word中更新参考文献即可。

【自学网络安全】二、防火墙NAT智能选路综合实验

任务要求: (衔接上一个实验所以从第七点开始,但与上一个实验关系不大) 7,办公区设备可以通过电信链路和移动链路上网(多对多的NAT,并且需要保留一个公网IP不能用来转换) 8,分公司设备可以通过总…

中小学校园EasyCVR视频综合监管方案:构建安全、智能的校园环境

一、背景需求分析 随着科技的快速发展,校园安全问题日益受到社会各界的关注。尤其是在中小学校园中,学生的安全更是牵动着每一个家庭的心。为了更有效地保障学生的安全,提高校园安全管理水平,视频监控系统在中小学中的应用越来越…

TikTok 入局小游戏,小游戏出海赛道大热,开发者如何抢滩海外市场?

国内小游戏市场的竞争日益激烈,开发成本上涨、买量的投入成本飙升,对小团队和个人开发者的资金要求量高。除此以外,单款游戏从软著、备案、到认证所需要的时间和费用都大幅提升,也对小游戏市场造成重大影响。重压之下,…

微信小程序如何实现登陆和注册功能?

👨‍💻个人主页:开发者-曼亿点 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 曼亿点 原创 👨‍💻 收录于专栏&#xff1a…

算法day04 位运算 插入排序 二分法 对数器

位运算: 1)有一个数组只包含这样的数,有几个数出现偶数次,有1个数出现奇数次,要求时间复杂度不超过o(n),怎么求出现奇数次的数。 使用 ^ 异或运算整个数组,偶数次运算结果为0,只留下最后一个奇数次的数。 …

java配置nginx网络安全,防止国外ip访问,自动添加黑名单,需手动重新加载nginx

通过访问日志自动添加国外ip黑名单 创建一个类,自己添加一个main启动类即可测试 import lombok.AccessLevel; import lombok.NoArgsConstructor; import lombok.extern.slf4j.Slf4j; import org.json.JSONArray; import org.json.JSONObject; import org.sp…

复现ORB3-YOLO8项目记录

文章目录 1.编译错误1.1 错误11.2 错误21.3 错误31.4 错误4 1.编译错误 首先ORB-SLAM相关项目已经写过很多篇博客了,从ORB-SLAM2怎么运行,再到现在的项目。关于环境已经不想多说了 1.1 错误1 – DEPENDENCY_LIBS : /home/lvslam/ORB3-YOLO8/Thirdparty…

ActiveMQ-CVE-2023-46604

Apache ActiveMQ OpenWire 协议反序列化命令执行漏洞 OpenWire协议在ActiveMQ中被用于多语言客户端与服务端通信。在Apache ActvieMQ5.18.2版本以及以前,OpenWire协议通信过程中存在一处反序列化漏洞,该漏洞可以允许具有网络访问权限的远程攻击者通过操作…

数据库的学习(5)

题目: 1、新增员工表emp和部门表dept create table dept (deptl int,dept name varchar(11)) charsetutf8; create table emp (sid int,name varchar(11),age int,worktime start date,incoming int,dept2 int) charsetutf8; insert into dept values (101,财务), (…

推广员团队分红体系,促进销量,能者多得

商城系统推广员的作用是通过奖励吸引会员成为推广人员,商家后台设置功能体系商品分佣比例,其推广到私域里完成订单获得佣金提现,商家获得更多新订单和新客户。 虽然商家可以招募大量推广员,但对推广员自身来说佣金吸引下还是缺少…

股指期货存在的风险有哪些?

股指期货因其标的物的特殊性,其面临的风险类型十分复杂,主要面临的一般风险和特有风险如下: 一般风险 从风险是否可控的角度,可以划分为不可控风险和可控风险;从交易环节可分为代理风险、流动性风险、强制平仓风险&…

快捷工具(提升工作效率)

文章目录 一、notepad++设置转json1.下载插件二、截图工具(可以将截图并粘贴到窗口)1.下载安装软件:snipaste三、idea 日志控制台查找日志1.idea 安装插件:Grep console四、beyond compare 4项目工程比较工具1.浏览器下载安装。本地运行五、xampp快速部署本地mysql,tomacat1.浏…

微信视频号的视频怎么下载到本地?快速教你下载视频号视频

天来说说市面上常见的微信视频号视频下载工具,教大家快速下载视频号视频! 方法一:缓存方法 该方法来源早期视频技术,因早期无法将大量视频通过网络存储,故而会有缓存视频文件到手机,其目的为了提高用户体验…

Win11 Anaconda3卸载与重装(20240714)

0,背景 系统为Win11,遇到了一些不好解决的错误,决定干脆直接卸载重装Anaconda 建议参考官方文档:Uninstalling Anaconda Distribution — Anaconda documentation 1,第一步-卸载软件 找到当前Anaconda安装的路径下…

Java实现数据结构——双链表

目录 一、前言 二、实现 2.1 类的创建 三、对链表操作实现 3.1 打印链表 3.2 插入数据 3.2.1 申请新节点 3.2.2 头插 ​编辑 3.2.3 尾插 3.2.4 链表长度 3.2.5 任意位置插入 3.3 删除数据 3.3.1 头删 3.3.2 尾删 3.3.3 删除指定位置数据 3.3.4 删除指定数据 3…

ensp实现ICMP重定向实验

1 概述 ICMP重定向报文是ICMP控制报文中的一种。在特定的情况下,当路由器检测到一台机器使用非优化路由的时候,它会向该主机发送一个ICMP重定向报文,请求主机改变路由。路由器也会把初始数据包向它的目的地转发。 2 实验复现 拓扑如下 PC1配…

Tomcat部署以及优化

1、tomcat tomcat是用java代码的程序,运行的是java的web服务器 tomcat和php一样都是用来处理动态页面,tomcat也可以做为web应用服务器,开源的 php处理.php为结尾的 tomcat 处理.jsp nginx 处理 .html 2、tomcat的特点和功能 1、servle…