移动海量服务下基于React的高性能同构实践ppt

前端狗

2019/09/18 发布于 技术 分类

文字内容
1. 移动海量服务下基于React的高 性能同构实践 IMWEB-willliang 1
2. 介绍 • 腾讯高级工程师—梁伟盛( 大圣) • IMWeb团队架构师 • 先后参与花样,交友, NOW直播等业务的核心开 发和架构设计 • 现在负责互动视频业务前端 架构设计与开发 2
3. NOW直播 素人直播 3
4. 花样直播 秀场直播 4
5. CONTENTS 柔性可用 why react 1 3 2 性能优化 时代变迁 5 4
6. 拨号时代 内置56K调制调解器 6
7. 页面交互简单 通用库(3k) 逻辑代码(3k) 38% 38% 25% css(2k) 7 GZIP后大小
8. HTML页面服务器端渲染(直出) open server 拉取数据 server render 页面完全 可用 绑定交 互 拉取js 页面展示 8
9. 完全展示用时10s 10s 9
10. 宽带时代 ADSL“猫”(1M/2M) 10
11. 前端交互开始复杂,js代码越来越大 通用库(60k) 逻辑代码(65k) 41% 45% 14% css(20k) 11 GZIP后大小
12. 前后端开始分离,异步加载数据 open 页面 拉取js js解析 拉取数据-1 页面展示 可用 browser render 拉取数据-2 拉取数据-3 12 AJAX
13. 完全展示一共用时4s 2.5s 1.5s 13
14. 光纤时代 光“猫”(20M/50M/100M) 14
15. 前后端开始分离,异步加载数据 open 页面 拉取js js解析 拉取数据-1 页面展示 可用 browser render 拉取数据-2 拉取数据-3 15 AJAX
16. 完全展示一共用时2.2s 1.2s 1s 16
17. CONTENTS 柔性可用 why react 1 2 3 性能优化 时代变迁 17 4
18. 18
19. 19
20. 我们是javascript程序员啊! 20
21. EJS 21
22. server template node_modules client 22
23. 23
24. 一处编译,到 处运行 24
25. 同构(isomorphic) Node.js+React.js 25
26. server react node_modules client 26
27. 一处编写,到 处运行 27
28. JSX t n e Cli render http DOM 请求页面 Ser ver renderToString http/tcp/udp 28 HTML String
29. CONTENTS 柔性可用 why react 1 3 2 性能优化 时代变迁 29 4
30. 30
31. RTT • RTT 表示 Round-Trip Time,即“往返时延”,表 示从发送端发送数据开始,到发送端收到来 自接收端的确认(接收端收到数据后便立即 发送确认),总共经历的时延。 31
32. reque st TCP三次握手 第一次握手 RTT 第二次握手 第三次握手 RTT 服务器返回数据 更多往返 32 respo nse
33. 前后端开始分离,异步加载数据 open 页面 N * RTT 拉取js N * RTT 页面展示 可用 js解析 拉取数据-1 browser render 拉取数据-2 拉取数据-3 33 AJAX
34. HTML页面服务器端渲染(直出) open server N * RTT_S 拉取数据 server render 页面完全 可用 绑定交 N * RTT互 拉取js 页面展示 34
35. 内网链路延迟时间(RTT) 绝对比外网短 35
36. 完全展示一共用时1.7s 0.3s 1.4s 36
37. 异步加载数据 全屏数据直出 2.2s 27.5 1.7s 22 16.5 11 5.5 0 页面加载时间 37
38. 38
39. 首屏 • 浏览器完成页面第一屏渲 染的时间,是用户的第一 感知,已经成为业界衡量 网页速度快慢的首要指标 39
40. 服务器端渲染(直出),首屏概念 open server render 首屏数据 首屏展示 交互绑定 页面完全 加载 拉取js 并解析 拉取数据 AJAX 40
41. 首屏用时1s 0.3s 1s 41
42. 首屏概念,减少非首屏的RTT open server N * RTT_S 首屏展示 render 首屏数据 交互绑定 页面完全 加载 拉取js 并解析 拉取数据 N * RTT AJAX 42
43. 异步加载数据 全屏数据直出 首屏优化直出 2.2s 27.5 22 1.7s 16.5 1s(首屏) 11 5.5 0 页面加载时间 43
44. 44
45. 减少RTT非常重要? 45
46. UDP大法好? 46
47. N * RTT_S 现有方案 http请求数据 JSON文本协议 N * RTT_S 改造方案 udp请求数据 二进制协议 47
48. 简单的例子 • json: {id:'>id: 101, str:'>str: ‘Hello’} • {id:'>id: 101, str:'>str: ‘Hello’}: • 101Hello: 48
49. 24 vs 49 6
50. 按位截取 参数位数 结果位数 50
51. Protocol Buffer • Google提供的一种数据序列化协议 • Protocol Buffers 是一种轻便高效的结构化数据存 储格式,可以用于结构化数据序列化,很适合做 数据存储或 RPC 数据交换格式。 • http://imweb.io/topic/570130a306f2400432c1396c?ut m_source=tuicool&utm_medium=referral 51
52. 首屏用时0.8s 0.3s 0.8s 52
53. 异步加载数据 27.5 22 全屏数据直出 首屏优化直出 udp优化支出 2.2s 1.7s 16.5 1s(首屏) 0.8s(首屏) 11 5.5 0 页面加载时间 53
54. 优化方案 • 页面首屏直出,其他使用异步加载 • 减少RTT请求 • 使用UDP协议,节省字节,加快数据的返回 • 不常变更的数据接入cache 54
55. 55
56. 产品经理 2天后有个活动,PCU大概是现 在的2.5倍 UI 前端 没问题 没问题 没问题 后台 56
57. 直到活动上线那一天 57
58. shenmegui 125 100 75 50 25 0 9 10 11 58 12
59. 59
60. CONTENTS 柔性可用 why react 1 3 2 性能优化 时代变迁 60 4
61. 服务器压力 柔性可用 61
62. 看美女 62
63. 人肉 非常粗暴 63
64. 组件划分 • 主播头像 • 用户列表 • 魅力值 • 聊天信息 • 。。。 64
65. config配置组件开关 render ajax t n e Cli DOM 请求页面 server config on/off http/udp/tcp 65 renderToString HTML String
66. Cache 66
67. 定时服务 node process1 node process2 put get cache (CKV) get get node process3 node process4 67
68. 一级缓存,首屏数据都接入cache(ckv) render ajax t n e Cli DOM 请求页面 server config on/off HTML String http/udp/tcp renderToString cache 68
69. • 头像 • 用户列表 • 魅力值 69
70. 二级缓存,页面接口都缓存到localStorage put 场景1 ajax/initdata localStorage 页面渲染 场景2 ajax/initdata localStorage get 页面渲染 70
71. 柔性服务 • 组件开关可配置 • 多级缓存,cache(ckv)缓存,本地缓存,默认数 据 • 。。。 71
72. 产品经理 2天后有个活动,PCU大概是现 在的10倍 UI 前端 没问题 没问题 没问题 后台 72
73. 完美 600 450 300 150 0 9 10 11 73 12
74. Thank You 74