请选择 进入手机版 | 继续访问电脑版
创作

阿里淘宝性能优化实施方案

性能优化  / 只看大图  / 倒序浏览   © 著作权归作者本人所有

#楼主# 2020-7-17

跳转到指定楼层
本帖最后由 明教小昭 于 2020-7-20 15:12 编辑

宗旨与理念

一切没有 profiling 的性能都是做无用功。
性能优化不能只着眼于局部的代码,凡是真正有价值的性能优化,必定是从端到端的业务场景建立体系来考虑的。        

性能体系建立方案

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


1. 现状评估和建立指标

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

b) 性能指标
i. 页面加载性能
ii. 动画与操作性能
iii. 内存、电量消耗
着重需要注意的是:页面加载性能。根据2020淘宝大数据分析得出,30%以上的用户在打开页面2s后如果未看到关键信息,就会关闭或离开当前页面。
秒开率(考核指标):一秒内能够打开页面看到关键信息的用户所占整体用户的百分比


2. 技术方案

思考:从输入URL,到回车,发生了什么?
a) 从域名到 IP 地址,需要用 DNS 协议查询
b) HTTP 协议是用 TCP 传输的,所以会有 TCP 建立连接过程
c) 如果使用 HTTPS,还有有 HTTPS 交换证书
d) 图片、文件等请求
对应优化的技术方案
图片1.png

3. 执行

a) 纯管理
纯行政管理,由项目负责人用纯粹的管理手段来执行方案。比如说,作为前端团队的 Leader,组织会议,要求整个团队使用我们前面谈的技术方案。
优点:简单粗暴,成本低
缺点:需要的行政资源不一定有,比如我没法强制让后端团队配合。纯粹的管理方式,团队本身的体验并不好,也不利于团队成长,最重要的是,纯粹管理方式容易造成执行不到位。

b) 制度化
制度化执行方式是用规则代替人的命令,指定责任人,通过培训、checklist、定期 review 等具体措施来保证实施。
优点: 可以极大地减轻管理工作量,一般现代互联网公司都会采用类似的方式。
缺点:太过依靠人的主动性。

c) 自动化
自动化的方式是在一些重要的操作路径上设置规则,针对我们的性能优化,例如:
1. 一个是把开发好的页面发布上线
2. 另一个是开发好的页面 URL 投放到首页等处的链接
趋势:抛弃纯管理化,结合制度化和自动化的执行方案


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

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


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

性能优化完整流程示例:
图片2.png

关于前端性能优化的经典实施案例,今天就展示到这里了。想要成为一个优秀的前端工程师,就需要不断学习,每天积累新的知识,并将学到的运用到工作项目中。我这里还有更多前端学习资源和面试题库,有想要了解前端、学习前端的小伙伴可以加我QQ:822311796  更有某机构价值5980元的VIP零基础前端入门视频免费送哟~

更多前端进阶知识,尽在WEB明教光明顶(https://web.xingruanedu.com

转播转播 分享分享 分享淘帖 反对反对
回复

使用道具

成为第一个回答人

B Color Link Quote Code Smilies
站点地图|手机版|WEB明教光明顶 |湘ICP备19021820号-1
Powered by WEB明教  © 2017-2020 Starsoft.
返回顶部