我的编程空间,编程开发者的网络收藏夹
学习永远不晚

前端性能优化笔记:性能优化体系与关键指标设定

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

前端性能优化笔记:性能优化体系与关键指标设定

2 性能优化流程

在进行性能优化处理前,我们首先得知道性能优化的相关流程,这样我们严格按照流程进行处理即可。与此同时,指定优化实践流程是确保信任也可以按照执行,这是优化成果得以长期保持的重要保障,也是我们后期维护的动力。

性能优化流程有:

  1. 指标设定
  2. 性能标准
  3. 收益评估
  4. 诊断清单
  5. 优化手段
  6. 性能立项
  7. 性能实践

指标设定和性能标准: 我们要选择什么样的指标作为风向标?设定指标后,就是确定性能标准即我们的性能优化目标是什么样的?性能要优化到什么程度算是合适的?

收益评估: 当我们做出这些性能优化的处理时,其实是需要关联产品目标进行收益评估,如果没有收益做出这些改变就不存什么意义了。做性能优化是为了服务于产品、提升用户体验,而不是在进行重复无意义的造轮子。

诊断清单: 其实在我们在生产过程中,有很多性能问题并不是立刻能够监听到的,对此需要将我们编写的业务代码接入到性能监控预警平台,根据性能标准给出诊断清单,方便我们进行后续的改进和优化。

优化手段: 在监控预警平台给出我们代码的诊断清单后,我们需要结合性能标准针对性能标准确定相应的优化手段。

性能立项: 我们进行性能项目立项时,是需要产品和后端同学的支持的,也是我们进行性能优化流程不可或缺的内容。

性能实践: 经历过性能优化的项目需要重新发起上线,并跟踪进行效果评估,结合场景把这些项目成果以文档或代码的形式沉淀下来,方便我们后续的学习和总结经验。

3 性能指标采集与上报

前面我们提到了性能优化的基本流程,其中重要环境就需要依赖于监控预警平台,需要对性能采集以及上报进行可视化。那么我们现在就需要把前面提到的性能指标以代码的形式进行实施落地,进行分解落地确保可以采集到发现的性能问题,然后再进行SDK封装后集合统计埋点,最后根据实际情况,指定上报策略。具体的有:

  1. 指标分解
  2. 指标采集
  3. SDK封装
  4. 统计埋点
  5. 上报策略
  6. 数据预处理

性能监控预警平台主要分为:性能数据处理后台、性能可视化展现前台以及性能数据存储三部分。

性能数据处理后台:主要在性能采集数据上报到性能平台后,对数据进行预处理、数据清晰和数据计算,然后生成前台可视化所需数据。

性能可视化展示前台:主要是对核心数据指标进行可视化展示,对性能数据波动进行监控,当指标超过某个监控阈值时,性能监控预警平台会通过邮件或者短信以及其他通知形式给我们发送预警信息。

性能数据存储:此部分主要是进行采集和上报的性能数据存储,方便后续进行数据分析和数据可视化处理。

4 性能监控预警平台

在我们的项目开发完毕后,在准备上线前一定要做性能专项测试,检查下你采取的措施和性能优化预期是否一致。

在整个性能优化体系中,你觉得最开始要做的事情是哪一个?比如说,在你们公司开发的APP活动页出现了加载数据卡顿的性能问题时,我们应该如何进行优化呢?

当然,首要的步骤是确定它的性能指标及其标准是什么?只有设定好了性能指标,知道了它的标准,后续我们才能知道围绕它如何进行性能优化。

那么什么样的指标是值得我们关注的呢?当然是围绕着用户进行服务和优化体验的可衡量的数据,可衡量即是可以通过代码来度量的,关注以用户为中心的关键结果和真实体验的。

关键结果:我们知道要关注用户关心的信息,那么用户到底关心的是什么呢?当用户进入商品详情页面时,他当然关注的是这个商品怎么样,具体到页面上的就是商品描述、商品头图、商品价格、商品销量以及如何购买按钮等关键信息。

真实体验:真实体验当然是使用产品的感受,比如用户进入列表页,在滑动过程中页面加载突然跳出一个弹窗,他会不会觉得烦躁呢?又比如我们在年底各大平台都会有年度报告,那么如果用户在进行滑动切换页面视频、动画和音乐播放并不是那么的流畅,这就会对产品预期想要得到的效果大打折扣。

5 性能优化关键指标设定及标准

在性能优化关键指标方面,当前业界主要集中在加载方面,特别是页面的白屏时间和首屏时间。除了手动采集埋点上报外,还可以自动化采集上报,但是交互性和视觉稳定性关键指标,业界还在探索中,没有达成统一的衡量标准,因此当前必须进行手动采集。

加载:就是在进入页面时,页面从白页加载到显示的载入过程。在你打开网站页面时,你会发现有的网站首页上的文字、图片出现得很缓慢,但是有的加载有很快,这个内容出现的过程就是加载过程。

视觉稳定性指标:CLS(Cumulative Layout Shift)也就是布局偏移量,它是指页面从一帧切换到另外一帧时,视线中不稳定元素的偏移情况。当前视觉稳定性指标CLS比较前沿,它的采集方法除了依赖Google的Lighthouse做本地采集,没有更好的处理方案。比如说:你正要点击页面购买链接的时候,原先的位置突然插入了一个9.9包邮抢购的广告,那么用户就点进了商品广告页面,你说尴尬不?

交互方面指标:FID指标(First Input Delay,首次输入延迟)指标必须尽量小于100ms,PSI(Perceptual Speed Index,视觉变化率)衡量标准是小于20%。

白屏时间:指的是从输入内容回车(包括刷新、跳转等方式)后到页面开始出现第一个字符的时间,标准时间是300ms。

首屏时间:首屏时间的计算是”首屏时间=白屏时间+渲染时间“。首屏加载是被讨论最多的话题,一方面web 前端首屏的加载性能的确普遍较差,另一方面,首屏的加载速度至关重要,很多时候过长的白屏会导致用户还没有体验到网站功能的时候就流失了,首屏速度是用户留存的关键点。

  • 从重要性角度看,在用户打开页面后第一眼看到的内容是非常重要的,比如电商页面的头图、商品价格、购买按钮等。这些内容即使在最恶劣的网络环境下,也要确保用户能够看到。
  • 从体验完整性角度看,进入页面后先是白屏,随着第一个字符加载到首屏内容显示结束,我们才会认为加载完毕,用户可以使用了。

首屏时间的标准,最初只是根据这个页面对时间的敏感度进行判定的,主要以用户平均首屏加载时间进行计算的,并没有详细区分2G/3G/4G/wifi这些网络环境。

注意:最佳:白屏<1s,首屏<1.5s,onload<3s

首屏时间在1s内,用户就会感觉加载速度很快,如果超过2.5s就会感到很慢。在1s内打开页面,人们对于这么短的时间敏感度就不是很明显,感知不出10ms和50ms有啥区别。当到了2G/3G弱网环境,或者网络不稳定的环境条件下,用户联网加载的时间会变得特别长,严重影响整体指标。

对此,又有人们开始采用中位数坐正态分布,看分位值统计。P50(50分位值)、P90(90分位值)、P99(99分位值),以P99为例,就是把所有首屏时间进行排序得到排名第99位的首屏时间作为指标,即P99。

后面又引入了指标:秒开率,即1s内打开用户的占比。

首屏时间毕竟粒度还是比较粗的,如果首屏时间太长,白屏时间段,那么到底是哪里出现的问题呢?

  • 首屏时间:可以拆分为白屏时间、数据接口响应时间、图片加载资源时间等
  • 白屏时间:数据接口响应时间可以直接从后端宿务中获取,不需要前端再重复计算

6 参考文章

《前端性能优化方法与实践》

7 写在最后

本篇文章只是作为《前端性能优化笔记系列》文章的开篇,引导读者对于性能优化体系有个更好的认知,了解相关的指标和指标,因为学习性能优化,并不是仅仅掌握一些优化技巧而已,更应该了解为什么要这样做?

 

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

前端性能优化笔记:性能优化体系与关键指标设定

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

前端性能优化笔记:性能优化体系与关键指标设定

本篇文章只是作为《前端性能优化笔记系列》文章的开篇,引导读者对于性能优化体系有个更好的认知,了解相关的指标和指标,因为学习性能优化。

系统性能优化的关键指标(yyds)!!!

今天,我们就来说说在高并发场景下做性能优化有哪些衡量标准,以及做优化时需要注意哪些问题。

前端性能优化之关键路径渲染优化

当 DOM 树和 CSSOM 树都构建完成的时候,他们就会合并在一起构建 render tree,因为要在页面上渲染不仅需要这个页面的结构,也需要知道整个页面的样式,所以 render tree 是 DOM 树和 CSSOM 树的结合体,有

前端性能优化笔记之首屏时间采集指标的具体方法

通常,我们在开发环境中进行首屏时间测试,是通过在内网中通过Chrome DevTools观察首屏时间,这样内外网络环境存在差异,导致测量的首屏时间也会有所不同。

网站性能优化:前端关键步骤来增加效能

在当今互联网高速发展的时代,网站已成为连接企业与用户的重要窗口。然而,随着网站规模的不断扩大和功能的日益复杂,网站性能问题也日益突出。用户对网站的体验质量要求越来越高,因此,优化网站性能成为了每个前端开发人员都应该关注的重要问题。优化网站
网站性能优化:前端关键步骤来增加效能
2024-02-03

万字长文:分享前端性能优化知识体系

性能优化的点非常的多,有的小伙伴觉得记起来非常的麻烦,所以这里主要梳理出一条线来帮助记忆。

优化云端性能,操作系统 IaaS 的关键要素

优化云端性能至关重要,而基础设施即服务 (IaaS) 操作系统在其中扮演着关键角色。本文探讨了优化 IaaS 性能的要素,包括存储、网络、计算和监控,并提供示例代码以帮助您提高虚拟机的性能。
优化云端性能,操作系统 IaaS 的关键要素
2024-03-06

PHP后台设计:性能优化与系统稳定性探索

随着Web应用在人们生活中的广泛应用,后台系统设计的重要性也日益凸显。在PHP后台设计中,性能优化与系统稳定性是两个不可忽视的问题。本文将探讨如何在PHP后台中实现性能优化和系统稳定性,并提供相应的代码示例。一、性能优化数据库连接池在
PHP后台设计:性能优化与系统稳定性探索
2024-01-19

降低HTML回流和重绘的关键策略:前端性能优化

前端性能优化:减少HTML回流和重绘的关键步骤,需要具体代码示例随着web应用程序的迅猛发展,用户对于web页面的性能要求也越来越高。而前端性能优化是实现高性能web页面的关键一环。在前端性能优化中,减少HTML回流和重绘是一个重要的方向
降低HTML回流和重绘的关键策略:前端性能优化
2024-01-26

揭秘前端性能优化模式:提高网站速度的关键

前端性能优化模式大揭秘:提升网站速度的秘诀摘要:本文将揭示一些提升网站速度的前端性能优化模式,包括优化代码结构、减少HTTP请求、使用CDN、压缩资源、使用缓存和懒加载等。这些技术将帮助网站提升用户体验,提高加载速度。一、优化代码结构在
揭秘前端性能优化模式:提高网站速度的关键
2024-02-03

了解网站性能优化的关键指标:你需要哪些指标的解析?

网站性能优化的指标解析:你需要了解哪些关键指标?随着互联网的快速发展,网站已经成为了企业推广产品、服务以及吸引用户的重要工具。然而,网站的性能对于用户体验和转化率有着至关重要的影响。为了提高网站的性能,我们需要关注一些关键指标,从而优化网
了解网站性能优化的关键指标:你需要哪些指标的解析?
2024-02-02

页面性能的关键:优化前端避免页面重绘和回流

前端优化必备:如何有效避免页面重绘和回流,需要具体代码示例随着互联网的快速发展,前端开发在网页性能优化方面变得愈发重要。其中,避免页面重绘和回流是提升网页性能的一项关键因素。本文将介绍一些有效的方法和具体的代码示例,帮助前端开发者有效地减
页面性能的关键:优化前端避免页面重绘和回流
2024-01-26

阿里云数据库定时切换实现高可用性与性能优化的关键

阿里云数据库定时切换是一种重要的技术手段,旨在提高数据库系统的可用性和性能。本文将介绍阿里云数据库定时切换的工作原理、应用场景以及优势,并通过实例来说明其具体操作方法。1.工作原理阿里云数据库定时切换是通过自动调度机制,在设定的时间段内,将数据库的读写请求从一个实例切换到另一个实例上。这种切换可以有效地避免单点故
阿里云数据库定时切换实现高可用性与性能优化的关键
2023-12-31

优化网站性能的关键要素揭秘:如何利用指标分析改善用户体验?

优化网站性能的关键指标详解:如何通过指标分析提升你的网站用户体验?随着互联网的快速发展,网站成为企业展示品牌形象和提供产品与服务的重要渠道。然而,随着用户对于在线体验的要求不断提高,网站性能的重要性也日益凸显。优化网站性能不仅可以提升用户
优化网站性能的关键要素揭秘:如何利用指标分析改善用户体验?
2024-02-02

不容忽视的关键指标:揭秘网站性能优化,从响应时间到页面加载速度!

网站性能优化指标大揭秘:从响应时间到页面加载速度,你不能忽视的关键指标!随着互联网的发展,人们对网站性能的要求也越来越高。无论是对于用户体验的要求,还是对于搜索引擎排名的要求,都需要我们不断优化网站的性能。但是,在进行网站性能优化时,我们
不容忽视的关键指标:揭秘网站性能优化,从响应时间到页面加载速度!
2024-02-03

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录