前端的性能对业务数据的影响

news2025/1/15 19:39:38

性能总论

一切没有 profiling 的性能都是耍流氓。凡是真正有价值的性能优化,必定是从端到端的业务场景建立体系来考虑的。

性能体系的建立可以分成以下几部分:

  • 现状评估和建立指标;
  • 技术方案;
  • 执行;
  • 结果评估和监控。

1.现状评估和建立指标 


对于指标又要考虑两个因素。一方面,对用户来说,什么样的性能指标能更好地评估它的体验?另一方面,对公司来说,什么样的指标会影响业务价值呢?

性能问题可以分成很多方面,最重要的几个点是:

  • 页面加载性能;
  • 动画与操作性能;
  • 内存、电量消耗。

注意,这里我们仅仅是对“性能”两个字的分析和解读,在对大量的用户数据分析后,我们发现,其实这三部分中,“页面加载性能”跟用户的流失率有非常强的关联性,而用户流失率,正是公司业务非常看重的指标。

用户平均加载时间作为性能指标,但是会有严重的问题:

  • 当加载时间低于一定数字,用户体感差别不大了,我们经过一定的研究,认为这个数字大约是 1 秒;
  • 少数超长时间加载的用户(如 2G),会极大影响整个指标,即指标不能反映大多数用户的体验

所以基于以上分析,有了个新的指标——秒开率

2.技术方案


基于秒开率指标,我们可以设计技术方案,首先考虑一下如何解决这个问题。

第一用户从输入 URL 后按下回车,到底发生了什么。

  1. 从域名到 IP 地址,需要用 DNS 协议查询;
  2. HTTP 协议是用 TCP 传输的,所以会有 TCP 建立连接过程;
  3. 如果使用 HTTPS,还有有 HTTPS 交换证书;
  4. 每个网页还有图片等请求。

从这个分析和实际试验的结果看,网页的加载时间,不但跟体积有关系,还跟请求数有很大关系,因此,我们最终设计的技术方案大约可以这样划分:

这里涉及的并不仅仅是前端技术,有服务端、客户端、设计师团队,所以要想做好性能优化,绝对不能把自己限制在局部的视角,必须是整个业务一起考虑,才能有良好的收效。

3.执行


执行也不简单,如果说方案主要靠技术,那么执行就是靠工程实施了。根据公司的实际情况,工程实施可能有不同的程度,我把工程水平从低到高分成三个阶段:

纯管理:纯行政管理,是由经理用纯粹的管理手段来执行方案。纯粹管理方式容易造成执行不到位。这样的执行方式多数出现在非技术岗位。

 制度化;制度化执行方式是用规则代替人的命令,指定责任人,通过培训、checklist、定期 review 等具体措施来保证实施,但是制度化执行方式还有很大成分是依靠人的主动性的,对程序员来说,还有更好的方式:自动化。

 

 自动化。自动化的方式是在一些重要的操作路径上设置规则,针对我们的性能优化,有两个点适合做这件事:一个是把开发好的页面发布上线,另一个是开发好的页面 URL 投放到首页等处的链接。

4.结果评估和监控


执行完了之后,还要有一定的结果总结,才是一个完整的工程实施,而且,凡是工程实施,肯定要有一定长效机制,不能优化完了退化,这些都要求有线上监控机制。要想做线上监控,分两个部分:

数据采集;

同样需要发布平台或者开发工具来配合,对性能数据来说,Performance API 非常好用,它是浏览器记录的性能数据,一般来说,我们用统一的代码把它上传到服务器端就够用了。

数据展现。

可以用不同的数据可视化方案来展现性能数据,没有一定之规。一般的数据监控平台,会提供报警机制,对性能来说,报警需求不是特别强烈,但是也可以设置一些条件,针对秒开率特别低的网页报警。

结语:性能应该成为一个团队的日常工作的一部分,持续进行。

此文章为4月Day15学习笔记,内容来源于极客时间《重学前端》

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

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

相关文章

【博学谷学习记录】超强总结,用心分享 | 架构师 Redis学习总结

文章目录1.Redis概述&安装配置安装启动2.Redis的Key的设计规范1、key名设计2、避免bigkey**string字符串类型**hash类型(散列表)list列表类型set集合类型sortedset有序集合类型bitmap位图 类型geo地理位置类型1.Redis概述&安装配置 官网&#x…

SQL SERVER数据库生成数据字典并且导出方法

SQL SERVER数据库生成数据字典并且导出方法打开SQL SERVER 2014找到你所需要建立数据字典的数据库在代码区输入如下SQL语句点击运行,导出或者带标题复制出来打开SQL SERVER 2014找到你所需要建立数据字典的数据库 右键→点击 新建查询 在代码区输入如下SQL语句 S…

椭圆型偏微分方程和格林函数

一、本文先简单地介绍一下Green 函数, 第一部分内容来自于文献 [0]BI-GreenNet: Learning Green’s Functions by Boundary Integral Network [1] Evans, L.C.: Partial Differential Equations. American Mathematical Society, Providence, R.I. (2010) [2]Learn…

Redis数据库的安装和命令使用以及python的调用

Redis 简介 Redis是完全开源免费的,是一个高性能的key-value数据库。 Redis与其他 key- value 缓存产品有以下三个特点: Redis支持数据的持久化,可将内存中的数据保存在磁盘中,重启时再次加载使用。Redis不仅支持简单的key-val…

故障定级和定责

故障管理的第一步是对故障的理解,只有正确地面对故障,我们才能够找到更合理的处理方式。 这便需要做两个工作:一是跟踪线上故障处理和组织故障复盘,二是制定故障定级定责标准,同时有权对故障做出定级和定责。 所以&a…

网上选课系统——管理员子系统的设计与实现

本系统是C/S(客户端/服务器)两层结构。采用C#数据库编程语言。服务器部分是SQL Server2000 关系数据库。客户端分为学生选课子系统和管理员管理子系统,它们通过存于后台数据库的数据产生联系。 无论是学生子系统还是管理员子系统&#xff0c…

Follow My Heart Of Apirl. 2023

This article will tell all my story in my daily file to make some deep memories in my heart for Apirl.2023. The line template: The template will be used as the mark of the storys start. 2023.04.10 Commodity n. 货物、商品、日用品 1. Global commodity prices …

《OpenCV3和Qt5计算机视觉应用开发》学习笔记

Qt Creator中使用opencv 在.pro文件中添加 INCLUDEPATH D:\MajorSoftware\opencv\opencv\build\include LIBS D:\MajorSoftware\opencv\opencv\mingw_build\lib\libopencv_*.a一个插件就是一个简单的库,如.dll,可以在运行时加载和使用插件&#xff…

基于模型预测控制(MPC)的微电网调度优化的研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

7针0.96寸OLED的HAL库代码(硬件SPI/全代码/stm32f1/CubeMX配置/包含有正负浮点数/100%一次点亮)

系列文章链接 HC-SR04超声波模块的使用 编码电机以及双电机驱动 4针 0.96OLED的使用 更多有意思的文章点击“我的主页” --------😐 更多有意思的视频 -----> B站 想要亿只独角兽 --------😐 前言 之前发布了一篇硬件I2C的0.96 OLED驱动代码&#…

全国计算机等级考试——二级JAVA完整大题题库【五十三道】

全国计算机等级考试二级 JAVA 题目内容 编写于2023.04.10 分为40道选择题和3道大题(大题是程序填空类型) 其中选择题只能进去做一次,一旦退出来则不可再进(注意!)。大题可以重复进入,重复做。…

JavaScript【七】JavaScript中的内置顶层函数

文章目录🌟前言🌟内置🌟顶层🌟内置顶层函数🌟 Number()🌟 parseInt()🌟parseFloat()🌟String()🌟Boolean()🌟 isNaN()🌟eval()🌟Numbe…

(详细)《美国节日》:某月的第几个星期几

目录 一、题目描述: 二、思路: 1、给定 年月日,如何知道这天是星期几? 2、已知这个月的第一天是星期几,如何知道第三个星期一是几号? 3、最后一个星期一 三、思路总结 四、代码 一、题目描述&#xf…

机器学习---集成学习报告

1.原理以及举例 1.1原理 集成学习(Ensemble Learning)是一种机器学习策略,它通过结合多个基学习器(base learners)的预测来提高模型的性能。集成学习的目标是创建一个比单个基学习器更准确、更稳定的最终预测模型。这…

力扣---LeetCode面试题17.04.消失的数字

文章目录前言面试题17.04.消失的数字方法一:方法二:异或解析:方法三:总结前言 我有我要赶去的远方,风雨兼程披星戴月 本章的内容是力扣每日随机一题的部分方法的解析 提示:以下是本篇文章正文内容&#xf…

安全防御 --- 恶意代码、防病毒

一、恶意代码 1、按照传播方式分类 (1)病毒 概念:病毒是一种基于硬件和操作系统的程序,具有感染和破坏能力,这与病毒程序的结构有关。病毒攻击的宿主程序是病毒的栖身地,它是病毒传播的目的地&#xff0…

2023.04.09 学习周报

文章目录摘要文献阅读1.题目2.摘要3.简介4.本文贡献5.传统方法6.IDLSTM-EC7.实验7.1 数据集7.2 基线7.3 评估指标7.4 实验结果8.结论9.展望MDS降维算法1.基本思想2.优化目标3.数学推导4.算法流程马尔可夫链1.随机过程2.简介3.数学定义4.转移概率矩阵5.状态转移矩阵的稳定性Navi…

Python 访问 PostgreSQL

文章目录一、前言1.1 概述1.2 什么是 Psycopg二、操作 PostgreSQL2.1 连接数据库2.2 异常处理2.3 创建表2.4 INSERT 操作2.5 SELECT 操作2.6 UPDATE 操作2.7 DELETE 操作2.8 事务管理2.9 调用存储函数2.10 批量操作一、前言 1.1 概述 Python 是一种高级、通用的解释型编程语言…

排序算法之希尔排序

📝个人主页:爱吃炫迈 💌系列专栏:数据结构与算法 🧑‍💻座右铭:快给我点赞赞💗 文章目录1. 希尔排序2. 算法思路3. 算法实现4. 算法性能分析💞总结💞1. 希尔排…

自己再造一个大规模预训练语言模型?可以的

1. 引言 自ChatGPT发布至今已近半年,一路走来,我们可以清楚地看到的一个趋势是,到了下半年,每位研究者都会拥有一个类似ChatGPT的模型。这种现象与当年BERT推出后,各种BERT变体层出不穷的情况颇为相似。实际上&#x…