欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端性能优化怎么做?阿里淘宝性能优化实施方案奉上

程序员文章站 2022-04-08 22:49:27
宗旨与理念一切没有 profiling 的性能都是做无用功。性能优化不能只着眼于局部的代码,凡是真正有价值的性能优化,必定是从端到端的业务场景建立体系来考虑的。性能体系建立方案现状评估和建立指标技术方案执行结果评估和监控1.现状评估和建立指标 a)现状评估作为一个架构师,指标要考虑两个因素。一方面,对用户来说,什么样的性能指标能更好地评估它的体验?另一方面,对公司来说,什么样的指标会影响业务价值? b)性能指标内存、电量消耗动画与......

 性能优化的重要性

首先,大家必须明确性能优化的重要性。

当我们项目功能越来越多,模块规模一步步扩大,就会发生一系列的性能问题,比如说首屏加载会变得非常慢,编译会延迟等等

我们所经手的任何一个项目,其生命历程都会走向性能优化这个阶段,无论是前端还是后台,都是如此,所以这是大家必会的一项目技能。

许多大型项目的背后都有一个性能优化小组,他们不做业务,专注于性能调优。

接下来我们看一下淘宝是怎么做性能优化的。

前端性能优化怎么做?阿里淘宝性能优化实施方案奉上

宗旨与理念

宗旨一切没有 profiling 的性能都是做无用功。

理念:性能优化不能只着眼于局部的代码,凡是真正有价值的性能优化,必定是从端到端的业务场景建立体系来考虑的

 

前端性能优化怎么做?阿里淘宝性能优化实施方案奉上

 

性能体系的建立(四步曲)

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

1. 现状评估和建立指标

现状评估 

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

性能指标

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

着重需要注意的是:页面加载性能。根据2020淘宝大数据分析得出: 30%以上的用户在打开页面2s后如果未看到关键信息,就会关闭或离开当前页面。

秒开率(性能考核指标):一秒内能够打开页面看到关键信息的用户所占整体用户的百分比

 

2. 技术方案

   思考:从输入URL,到回车,发生了什么?

     1. 从域名到 IP 地址,需要用 DNS 协议查询

     2. HTTP 协议是用 TCP 传输的,所以会有 TCP 建立连接过程

     3. 如果使用 HTTPS,还有有 HTTPS 交换证书

     4. 图片、文件等请求

    对应优化的技术方案:

前端性能优化怎么做?阿里淘宝性能优化实施方案奉上

 

3. 执行

  • 纯管理

纯行政管理,由项目负责人用纯粹的管理手段来执行方案。比如说,作为前端团队的 Leader,组织会议,要求整个团队使用我们前面谈的技术方案。

优点:简单粗暴,成本低

缺点:需要的行政资源不一定有,比如我没法强制让后端团队配合。纯粹的管理方式,团队本身的体验并不好,也不利于团队成长,最重要的是,纯粹管理方式容易造成执行不到位。

  • 制度化

制度化执行方式是用规则代替人的命令,指定责任人,通过培训、checklist、定期 review 等具体措施来保证实施。

优点: 可以极大地减轻管理工作量,一般现代互联网公司都会采用类似的方式。

缺点:太过依靠人的主动性。

  •  自动化

自动化的方式是在一些重要的操作路径上设置规则,针对我们的性能优化,例如:

            1. 一个是把开发好的页面发布上线

            2. 另一个是开发好的页面 URL 投放到首页等处的链接

     发展趋势:抛弃纯管理化,结合制度化和自动化的执行方案

 

4. 结果评估和监控

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

a. 数据采集与记录(网页性能打分系统)

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

b. 数据展现

可以用不同的数据可视化方案来展现性能数据,没有一定之规。选择有报警机制的就好了,也可以设置一些条件,针对秒开率特别低的网页报警。

最后附上一个性能优化完整流程示例:

前端性能优化怎么做?阿里淘宝性能优化实施方案奉上

 

如果对大家有帮助,欢迎点赞、评论和转发,感谢大家的支持。

 

本文地址:https://blog.csdn.net/qq_35942348/article/details/107410215