GMTC极限前端性能优化 陈辰

前端狗

2019/07/09 发布于 编程 分类

GMTC2019 

文字内容
1. 极限前端性能优化 1 2019 KE.COM ALL COPYRIGHTS RESERVED
2. 2 2019 KE.COM ALL COPYRIGHTS RESERVED
3. 3 2019 KE.COM ALL COPYRIGHTS RESERVED
4. 个人简介 陈辰(CC老师),先后供职联想研究院、百度、阿里,现任贝 壳找房前端架构委员会专家。目前负责公司横向前端架构项目, 开源项目。 2019 GIAC全球架构师峰会演讲嘉宾。 慕课网性能优化认证讲师,著有《前端性能优化-基础知识认 知 》、《前端性能优化-通用的缓存SDK 》等课程。 知乎【前端成长那些事儿】贝壳专栏创始人。 个人:https://github.com/ChenChenJoke 爱思益求职PPT模板,王亚威2016/07/02修订版 4 2019 KE.COM ALL COPYRIGHTS RESERVED
5. 前言 本次分享希望大家理解性能优化极致都需要具 备的能力。 5 2019 KE.COM ALL COPYRIGHTS RESERVED
6. 目录(Contents) • 个人简介 • 极致 • 真实的故事 • 结语 6 2019 KE.COM ALL COPYRIGHTS RESERVED
7. 讲讲细节 • 理解性能优化收益和所处阶段。 • 性能优化的数据支撑平台搭建。 • 极致技术细节(内容优化)。 7 2019 KE.COM ALL COPYRIGHTS RESERVED
8. 性能优化商业用途 8 2019 KE.COM ALL COPYRIGHTS RESERVED
9. 9 2019 KE.COM ALL COPYRIGHTS RESERVED
10. 讲讲细节 • 理解性能优化收益和阶段。 • 性能优化的数据支撑平台搭建。 • 极致技术细节(内容优化)。 10 2019 KE.COM ALL COPYRIGHTS RESERVED
11. 三大数据 现状:评估出是否需要优化,以及优化数据的具体原因。 目标:主要是性能优化的数据理想状态,以及优化方案制定的 主要因素。 成果:优化后实际达到的效果,大多数效果不如目标。 11 2019 KE.COM ALL COPYRIGHTS RESERVED
12. 平台差异 云服务平台 § 数据的保密性。 § 基于云平台提供服务的收费。 § 数据聚合⽅式的定制。 我们面对的 困难 § 数据展⽰⽅式。 § 定制化服务响应滞后。 12 2019 KE.COM ALL COPYRIGHTS RESERVED 私有平台 § 平台质量不好保证。 § 技术类项⺫,导出需求 困难。 § 开发⼈员不⼀定理解需 求。 § 资源争取困难。
13. FE的困难 操作系统知识 需求梳理 软实力 推广落地 硬实力 服务器知识 13 2019 KE.COM ALL COPYRIGHTS RESERVED 数据处理能力 系统设计能力
14. 贝壳数据平台—fee架构图 14 2019 KE.COM ALL COPYRIGHTS RESERVED
15. 贝壳数据平台—fee数据流程图 15 2019 KE.COM ALL COPYRIGHTS RESERVED
16. 讲讲细节 • 理解性能优化收益和阶段。 • 性能优化的数据支撑平台搭建。 • 极致技术细节(内容优化)。 16 2019 KE.COM ALL COPYRIGHTS RESERVED
17. 两大内容 17 JavaScript Bytes(2016-2019) Image Bytes(2016-2019) PC ▲34.0% 295.8 KB → 396.3 KB ▲30.1% 747.0 KB → 971.5 KB M ▲51.6% 237.2 KB → 359.6 KB ▲98.8% 435.5 KB → 865.9 KB 2019 KE.COM ALL COPYRIGHTS RESERVED
18. 文本 # the message is coming from ke.com # key-value format followed by a newline and the encrypted message. format:'>format: secret-cipher date:05/05/19'>date:05/05/19 CHENCHEN IS A GOOD BOY format:'>format: secret-cipher date:05/05/19'>date:05/05/19 2(CHEN) IS A G2OD BOY 163字符►58字符 压缩比例65% 18 2019 KE.COM ALL COPYRIGHTS RESERVED
19. GZIP原理 19 优化算法 基本原理 LZ77 找相同、做标记、记位置,做替换 Huffman 多换少,少换多 2019 KE.COM ALL COPYRIGHTS RESERVED
20. 文本压缩效果 20 内容库 大小 压缩后大小 压缩比率 foundation-5.css 186 KB 22 KB 88% foundation5.min.css 146 KB 18 KB 88% 2019 KE.COM ALL COPYRIGHTS RESERVED
21. GZIP压缩图片 21 压缩前 压缩后 优化比例 86820B 81440B 6.3% 2019 KE.COM ALL COPYRIGHTS RESERVED
22. 方案 消除和替换图像。😁 矢量图和光栅图优化。😃 有损压缩与无损压缩。😍 22 2019 KE.COM ALL COPYRIGHTS RESERVED
23. 视觉欺骗 23 2019 KE.COM ALL COPYRIGHTS RESERVED
24. 人眼色感度 24 2019 KE.COM ALL COPYRIGHTS RESERVED
25. 更进一步 25 2019 KE.COM ALL COPYRIGHTS RESERVED
26. 目录(Contents) • 个人简介 • 极致 • 真实的故事 • 结语 26 2019 KE.COM ALL COPYRIGHTS RESERVED
27. 真实案例(1) 巴西当地时间 2014年7月17 日, 国家主席习近 平在巴西利亚 同巴西 总统罗塞夫举 行会谈。 27 2019 KE.COM ALL COPYRIGHTS RESERVED
28. 28 2019 KE.COM ALL COPYRIGHTS RESERVED
29. 29 2019 KE.COM ALL COPYRIGHTS RESERVED
30. 我们尝试的方案 1、第一次方案,方案svg,图片原始126KB,转换后139KB。 (为什么选择这个方案)。 2、第二次方案,无损压缩。 3、第三次方案,抽离像素通道。 4、第四次方案,图片转行样式表。 30 2019 KE.COM ALL COPYRIGHTS RESERVED
31. 31 2019 KE.COM ALL COPYRIGHTS RESERVED
32. 我们尝试的方案 5、第五次方案 (1)无损压缩图片。 (2)手动刷新运营商缓存,强制缓存图片。 (3)投放大量广告。 32 2019 KE.COM ALL COPYRIGHTS RESERVED
33. 真实案例(2) 鹰眼系统【实体集】功能报错。 (1)错误日志排查id错误。 (2)偶现非常难浮现,大部分提交数据时无问题。 (3)系统被投诉过数次影响正常交易。 33 2019 KE.COM ALL COPYRIGHTS RESERVED
34. 结语 • 对于收益评估的大局观。(确定你做的事儿是有意义) • 性能优化的数据支撑平台搭建。(一切优化都已来数据) • 内容优化技术细节。(能帮你提出天马行空的方案) 34 2019 KE.COM ALL COPYRIGHTS RESERVED
35. 35 2019 KE.COM ALL COPYRIGHTS RESERVED
36. 36 2019 KE.COM ALL COPYRIGHTS RESERVED
37. 37 2019 KE.COM ALL COPYRIGHTS RESERVED