以用户为中心的前端性能

在这里插入图片描述

1. 简介

前端性能跟用户体验息息相关。举个栗子,当你打开乘车码扫码进站,网页白屏了很久才加载出来,延误了乘车时间;当你在微信抢红包时,点击按钮后延迟了一会才开始转圈圈,最终没抢到红包。当出现这样的情况,用户体验就不好了。有研究表明,网页加载时间超过3秒,有一半的用户会失去耐心而离开。由此可见,前端性能对用户体验很重要

那么,什么是前端性能呢?

谈到性能,我们会想到高并发、高吞吐量,但这些是用户无法感知到的。对于用户来说,页面秒开、交互顺畅,才会觉得这个网站快。所以,前端性能关注的是页面加载速度和交互响应速度

image.png

2. 页面加载

如果页面加载太慢,用户就会失去耐心而离开。那么,浏览器是怎么加载页面的呢?

  • 首先,加载HTML并构建DOM。同时,同步地加载脚本(<script>),异步地加载异步脚本(<script async>) 和图片等资源。
  • 然后,DOM构建完成之后,加载延迟脚本(<script defer> 和 <script type=‘module’>)。在以上过程中,非异步脚本都会等待CSS加载。
  • 最后,DOM构建完成,所有脚本、CSS和图片等资源加载完成,即页面加载完成。

下图是页面加载的整个生命周期:
image.png

关键时间点如下:

  • domInteractive:表示DOM构建完成的时间点(此时JavaScript已经可以访问DOM)。
  • domContentLoadedEventStart:表示domContentLoaded事件处理器开始的时间点。(此时,脚本和CSS已经加载完成,异步脚本除外)
  • domComplete:表示页面加载完成的时间点(包括DOM解析完成,所有脚本、CSS和图片等资源加载完成)。

这些关键时间点,客观地衡量了页面加载速度。但是对用户来说,能直接感知的是白屏时间

对应的指标如下:

  • FCP: First Contentful Paint即首次渲染出内容的时间点。
  • LCP:Largest Contenful Paint即渲染出主要内容的时间点。与FCP相比,用户对LCP的感知会更明显。

3. 交互响应

用户看到页面渲染出来了,就会下意识地去操作页面,这时如果没有及时反馈,用户就会感觉到页面有延迟。

那么,为什么页面没有及时响应呢?

用户输入或点击按钮触发事件,网页会执行事件处理函数。如果处理时间过长,就会阻塞主线程,无法及时处理UI事件,造成页面卡顿。

对应的指标如下:

  • TTI: Time To Interactive,即页面可交互的时间点。
  • FID:First Input Delay,即用户首次输入的延迟时间。
  • long tasks:如果一个任务执行时间超过50ms,就是long tasks。long tasks会阻塞主线程,造成页面卡顿。
  • input delay:从用户输入到页面响应的时间差值。

4. 采集性能数据

网页的加载和渲染是发生在浏览器端的,所以依赖于浏览器提供的API来获取性能数据。

4.1. 采集页面加载性能

new PerformanceObserver((entryList) => {  
  for (const entry of entryList.getEntries()) {  
      console.log(entry)
  }  
}).observe({type: "navigation", buffered: true});

image.png

4.2. 采集FCP&LCP

// 获取FCP
new PerformanceObserver((entryList) => {  
  for (const entry of entryList.getEntries()) {  
      console.log(entry)
  }  
}).observe({type: "paint", buffered: true});

image.png

// 获取LCP
// 浏览器会多次报告 LCP ,而一般真正的 LCP 是用户交互前最近一次报告的 LCP
new PerformanceObserver((entryList) => {  
  for (const entry of entryList.getEntries()) {  
    console.log('LCP candidate:', entry.startTime, entry);  
  }  
}).observe({type: 'largest-contentful-paint', buffered: true});

image.png

4.3. 采集TTI&FID

浏览器没有提供直接获取TTI的API,但有方法可以计算出TTI。计算方法是:找到FCP之后的第一个安静窗口,窗口前的最后一个long task结束时间就是TTI。

安静窗口需满足三个条件:1.没有long task;2.窗口内get请求不超过2个;3.窗口时间不少于5s。

image.png

// 获取FID
new PerformanceObserver(function(list, obs) {  
  const firstInput = list.getEntries()[0];  
  
  // Measure the delay to begin processing the first input event.  
  const firstInputDelay = firstInput.processingStart - firstInput.startTime;  
  // Measure the duration of processing the first input event.  
  // Only use when the important event handling work is done synchronously in the handlers.  
  const firstInputDuration = firstInput.duration;  
  // Obtain some information about the target of this event, such as the id.  
  const targetId = firstInput.target ? firstInput.target.id : 'unknown-target';  
  // Process the first input delay and perhaps its duration...  
  
  // Disconnect this observer since callback is only triggered once.  
  obs.disconnect();  
}).observe({type: 'first-input', buffered: true});

4.4. 采集long task

// 获取long task
new PerformanceObserver((entryList) => {  
  for (const entry of entryList.getEntries()) {  
    console.log(`startTime=${entry.startTime},duration=${entry.duration}`);  
  }  
}).observe({type: 'longtask', buffered: true});

image.png

4.5. 性能测试工具

以下是一些常用的性能测试工具:

  1. lighthouse

Lighthouse 是 Google 开发的一款性能测试工具。支持Chrome Extension手动使用,还可以通过 Node CLI 集成到流水线自动化测试。
image.png

  1. www.webpagetest.org

如果要测试国外网站,可以用webpagetest。
image.png

5. 性能基线

根据用户对网页性能的感知,有了FCP、LCP、TTI、FID等性能指标来衡量网页性能。那么,如何划分优劣呢?为此,Google提供了一个标准的性能基线。我们可以参考这个基线来监控网页性能的达标率。需要注意的是,随着软硬件的升级,基线本身是会有调整的。另外,设备性能和网络环境对网页性能也有很大影响,例如IOS上报的性能指标一般要优于安卓。

指标
FCP[0,1800ms][1800ms,3000ms]>3000ms
LCP[0,2500ms][2500ms,4000ms]>4000ms
TTI[0,3800ms][3800ms,7300ms]>7300ms
FID[0,100ms][100ms,300ms]>300ms

6. 总结

前端性能对用户体验很重要。如果页面加载太慢,用户就会失去耐心而离开。页面加载出来后,用户会下意识地去操作页面,如果页面没有及时给出反馈,用户就会感知到页面延迟。因此,针对用户对性能地感知,可通过FCP、LCP、FID、TTI、long task、input delay等性能指标,衡量页面性能。通过采集性能数据,有效地帮助分析网页性能,提升性能,提升用户体验。

参考资料

海愚-如何重新认知性能优化及其度量方法

MDN Web Performance

Web Performance Working Group

前端监控系列3 | 如何衡量一个站点的性能好坏

深入浅出 Performance 工具 & API

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

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

相关文章

医疗器械设备模组的具体应用

直线模组是一种高精度、高速度的精密传动元件&#xff0c;目前被广泛应用在各种工业自动化领域&#xff1b;尤其是在激光加工、电子制造、医疗设备、物流设备和机器人等行业中&#xff0c;都发挥着重要作用&#xff0c;接下来我们看看医疗器械设备模组的具体应用吧&#xff01;…

echarts笔记-GeoJSON河北数据下并裁剪为冀北地图并使用echarts加载

首先找个网站把河北的GeoJSON数据下载下来&#xff0c;我用的是这个&#xff0c;理论上任意一个都可以 DataV.GeoAtlas地理小工具系列 将json数据下载后&#xff0c;进行裁剪&#xff0c;仅保留冀北数据。 如下&#xff0c;我裁剪的数据&#xff1a; {"type": &qu…

【备忘干货】c/c++ (wasm)和js互相调用记录

c/c&#xff08;wasm&#xff09;和js互相调用记录 废话 :)准备工作&#xff1a;安装Emscripten初探&#xff1a;C(wasm)之hello world进一步探究&#xff1a;接口调用1.js调用c&#xff0c;一些基本类型的传递&#xff08;char*&#xff0c;int&#xff0c;float&#xff09;以…

企业安全生产管理系统功能介绍

安全生产管理系统通过借助信息化手段和技术算法&#xff0c;建立了一个集安全风险监测预警、安全分区管理、隐患排查治理、特殊作业、人员定位管控于一体的“一张图”平台。平台可以实现企业安全生产管控的全面监管&#xff0c;推动公司生产安全业务的动态管理、集中管理和协同…

014 OpenCV canny边缘检测

一、环境 本文使用环境为&#xff1a; Windows10Python 3.9.17opencv-python 4.8.0.74 二、canny原理 OpenCV中的Canny边缘检测算法是一种基于图像处理的计算机视觉技术&#xff0c;主要用于检测图像中的边缘。Canny边缘检测算法的原理是通过计算图像中像素点之间的梯度值来…

GPT4-Turbo技术原理研发现状及未来应用潜力分析报告

今天分享的是GPT4-Turb系列深度研究报告&#xff1a;《GPT4-Turbo技术原理研发现状及未来应用潜力分析报告》。 &#xff08;报告出品方&#xff1a;深度行业分析研究&#xff09; 报告共计&#xff1a;46页 图像理解能力提升&#xff1a;三大视觉学习方法  为打造视觉大模…

53.redis分布式缓存

目录 一、单机安装Redis。 二、Redis主从集群。 2.1.集群结构 2.2.准备实例和配置 2.3.启动 2.4.开启主从关系 2.5.测试 三、搭建哨兵集群。 3.1.集群结构 3.2.准备实例和配置 3.3.启动 3.4.测试 四、搭建分片集群。 4.1.集群结构 4.2.准备实例和配置 4.3.启动…

网络层之SDN基本概念、路由算法和路由协议

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

淘宝API接口申请指南

一、申请条件数据接口 已注册淘宝账号并完成实名认证&#xff1b;拥有良好的淘宝信用记录&#xff1b;符合淘宝API接口的相关规定。 二、申请流程 登录淘宝账号&#xff0c;进入“卖家中心”页面&#xff1b;点击“我要开店”-“申请应用”&#xff0c;选择“淘宝API”&…

LangChain(0.0.340)官方文档五:Model

LangChain官网、LangChain官方文档 、langchain Github、langchain API文档、llm-universe 文章目录 一、Chat models1.1 Chat models简介1.2 Chat models的调用方式1.2.1 环境配置1.2.2 使用LCEL方式调用Chat models1.2.3 使用内置Chain调用Chat models 1.3 缓存1.3.1 内存缓存…

【Linux】:线程(一)概念

线程概念 一.线程1.简单理解2.一些疑问3.简单说一下优缺点&#xff0c;异常和用途 二.进程VS线程1.进程和线程的联系和区别2.phread线程库(创建)3.线程的LWP4.线程等待5.线程终止 三.C11里的线程四.创建线程最底层接口 一般教程里定义线程&#xff1a;是进程内的一个执行分支。…

PicoScope 7 软件报警功能可实现自动保存和循环捕捉

最近很多用户提到&#xff0c;怎么让虹科Pico示波器采集信号到缓冲区满了之后自动保存在电脑里&#xff0c;然后清出缓存空间继续采集&#xff0c;如此循环工作。这里不得不向大家介绍一下PicoScope软件的强大功能之一&#xff1a;报警功能&#xff01; 报警在软件的工具菜单下…

盘点最近两个世纪那些搞怪又精彩的专利

人类的创新是无止境的&#xff0c;下面收集的就是最近两个世纪全球那些奇怪搞笑、精彩的6项专利。 小胡子卫士 (1876) 这款“胡须防护罩”由 VA.Gates 于 1876 年获得专利&#xff0c;是在节日盛宴期间保护胡须的巧妙解决方案。“弯曲和凹形的护罩&#xff0c;可以由硫化橡胶、…

visual c++ 2019 redistributable package

直接安装下面包只有24M Microsoft Visual C Redistributable 2019 x86: https://aka.ms/vs/16/release/VC_redist.x86.exe x64: https://aka.ms/vs/16/release/VC_redist.x64.exe ———————————————— 版权声明&#xff1a;本文为CSDN博主「kpacnB_Z」的原创文章…

堆排序(C语言)

前言 在上一篇内容&#xff1a;大小堆的实现&#xff08;C语言&#xff09;&#xff0c;我们实现了关于创建大小堆的各函数与实现。但是如果突然要使用一个堆排序但是此时并没有一个现成的堆&#xff0c;这就需要花费时间去新建实现堆的插入删除这些操作从而实现一个堆&#xf…

Oracle-CDB容器数据库修改service_names踩坑

前言: 最近在对一套Oracle容器数据库进行迁移测试时&#xff0c;为了保持新环境与旧环境的服务名一致&#xff0c;需要在新环境添加旧环境的服务名&#xff0c;在CDB的根容器通过service_name参数添加旧环境的服务名之后&#xff0c;发现数据库PDB的服务名全部被注销&#xff0…

今日思考 -- 创新领导力(CIO)读后感

收获3个观点&#xff1a; 1 &#xff0c;IT DT 商业&#xff0c;才是未来IT人的出路之一 &#xff01; 2 &#xff0c;在CXO中&#xff0c;CIO像CEO一样&#xff0c;具备了整个企业的业务全视角 &#xff0c;同时也更具解决 ‘’系统性‘’问题的能力 &#xff01; 3 &…

go并发编程(中)

目录 一、并发安全性 1.1 变量并发安全性 1.2 容器并发安全性 二、多路复用 三、协程常见的面试题 3.1交替打印奇数偶数 一、并发安全性 1.1 变量并发安全性 这个和C中并发安全是一样的&#xff0c;主要是多个线程对临界资源的同时访问&#xff0c;最经典的就是 n操作…

网络层之IP数据报格式、数据报分片、IPv4、子网划分和子网掩码

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

openmmlab环境搭建及模拟kitti数据集跑pointpillars模型

点云训练—openmmlab环境搭建及模拟kitti数据集跑pointpillars模型 1 环境搭建 在我的 linux 服务器上&#xff0c;基于ubuntu20.04 参见&#xff1a;开始你的第一步 — MMDetection3D 1.3.0 文档 1.1 本地环境已安装anaconda. anaconda的安装参见博文&#xff1a;DS6.1-Y…