《React前后端同构之道》 kevinyyang

前端狗

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

文字内容
1. React 同构实践 杨春文
2. Abount me 2012 - 2015 百度 2015 - now 腾讯 fudao.qq.com http://imweb.io
3. 同构 • React & Redux • why • How • Challenge
4. Thinking in React
5. Thinking in React web component
6. Thinking in React
7. Thinking in React
8. new props & state server getDefaultProps componentWillReceiveProps getInitialState shouldComponentUpdate componentWillMount componentWillUpdate render componentDidMount componentDidUpdate componentWillUnmount
9. Thinking in Redux
10. Thinking in Redux ● 复杂页面的状态变化 ● 组件间通信 ● 单一数据源 ● 单向数据流
11. Thinking in Redux UI state = reducer (data,preState) store data = dispatch(action)
12. 业务场景 ● Hybrid APP (≈100%离线包) ● 手Q (≈30%离线包) ● 需要内容尽快展示 ● SEO ● …...
13. React + Redux ● ● ● ● 数据<=>UI解耦 架构清晰 维护方便 组件很容易前后端复用
14. 最初做法 user 空白html 拉取js js引擎 数据 js引擎 UI
17. 离线包 user 空白html 拉取js js引擎 数据 js引擎 UI
18. React引擎初始化
19. Reac引擎初始化
20. Reac引擎初始化
21. React引擎初始化
22. React引擎初始化
23. React引擎初始化
24. React引擎初始化
25. React引擎初始化
26. React引擎初始化
27. 现实更严峻
28. 现实更严峻 实测平均近400+ms!
29. 另外的时间消耗 某ajax请求耗时曲线
30. 首屏统计 某页面首屏时间 ≈ 1.2s
31. 时间都去哪了 React&Redux + qqapi ● ● ● 体积大 (gzip: 50.6+14.4kb) 基础框架初始化慢 (400+ms) ajax请求耗时 (≈550ms) ● 秒开几乎不可能
32. 时间都去哪了 ≈400ms user 空白html ≈400ms 拉取js ≈550ms js引擎 数据 ≈170ms js引擎 UI
33. 时间都去哪了 ≈400ms user 离线包命中率有限 时间消耗不可忽略 空白html ≈400ms 拉取js ≈550ms js引擎 数据 ≈170ms js引擎 UI
34. React真的很快吗? React渲染组件树(DOM) ≈400ms user 空白html ≈400ms 拉取js ≈550ms js引擎 数据 ≈170ms js引擎 UI
35. render: 组件树从上往下 一层层依次渲染/更新
36. 解决问题 ● ● 第一个请求中就返回首屏 耗时的操作放到首屏展示后 ○ ○ ○ 初始JS 拉取非首屏数据 渲染非首屏
37. 异步渲染 服务端渲染
38. 服务端React
39. 服务端React nt clie component DOM Virtual DOM data ser ver HTML string
40. 服务端React nt clie component DOM Virtual DOM data ser ver HTML string
41. 服务端React nt clie component DOM Virtual DOM data ser ver HTML string
42. 服务端React nt clie component DOM Virtual DOM data ser ver HTML string
43. 数据服务器 ajax browser(离线包) fetch('/cgi-bin/get_data').then store = createStore(reducer, data) 同构
DOM HTML string UI node
44. 数据服务器 ajax browser(离线包) fetch('/cgi-bin/get_data').then store = createStore(reducer, data) 同构 ● ● ● 封装一样的数据 API (fetch) 数据处理层(reducer)复用 React复用
DOM HTML string UI node
45. 服务端渲染 user 拉取首屏 拉取js js引擎 数据 js引擎 UI
46. 服务端 + 离线包 user 拉取首屏 拉取js js引擎 数据 js引擎 UI
47. 离线包&异步渲染 ≈400ms user 首屏 空白html ≈400ms 拉取js ≈550ms js引擎 数据 ≈50ms js引擎 UI
48. 服务端 + 离线包 ≈790ms user 首屏 拉取首屏 ≈400ms 拉取js js引擎 数据 ≈50ms js引擎 UI
49. 异步渲染 这步放到了服务端 服务端渲染
50. 效果 首屏时延-离线包 (1.17021s) 首屏时延-服务端渲染 (0.795304s)
51. 效果 服务端代码只占了全部业务代码的 ≈5% 一个需求开发仅需写非常少量的node代码
52. 一些Tips ● 服务端只生成首屏 ○ ○ 只为了减少白屏时间 node拉取数据也消耗 时间
53. 首屏
54. 一些Tips ● 服务端只生成首屏 ○ ○ ● 只为了减少白屏时间 node拉取数据也消耗 时间 客户端API 要谨慎
55. new props & state getDefaultProps 同构组件中,这些函数不能使用 window, navigator, document等 componentWillReceiveProps getInitialState shouldComponentUpdate componentWillMount componentWillUpdate render componentDidMount componentDidUpdate componentWillUnmount
56. 新的挑战
57. 新的挑战 node端拉取数据耗 时log
58. 新的挑战 平均耗时≈125ms
59. 新的挑战 平均耗时≈125ms 虽然比用户端拉取快很多,但是 还是相当耗时
60. Cache node process 1 node process N... pu t t ge cache (ckv) t ge node process 2 ge t node process 3
61. Cache: 相对固定的内容 data 老师信息 课程信息 学员信息 ... renderToString html fetch put node process 1 node process N... t ge cache (ckv) t ge node process 2 ge t node process 3
62. Cache进阶
65. 缓存有难度/风险: ● ● ● 变动频繁 与登录态关联 …...
66. CACHE进阶 ● 选择性缓存某部分 ● 与登录态相关/变动频繁的信息不作直出 ● 二次渲染再拉取数据作 UI更新
67. 服务端渲染结果 二次服务端渲染结果
68. 重复渲染?
69. 重复渲染? react(data) 首屏 data react(data) 首屏 data react(data) 非首屏
70. 重复渲染? react(data) 首屏 data react(data) 首屏 data react(data) 非首屏
71. 服务端首屏文本
72. checksum:html内容的Adler-32算法值 component Virtual DOM renderToString HTML string data 计算Adler-32算法值 checksum
73. checksum:html内容的Adler-32算法值 只要组件、数据一致,前端 checksum也会和后台一致 直接跳过render(重复渲染) component Virtual DOM renderToString HTML string data 计算Adler-32算法值 checksum
74. 小结 ● react + redux: 畅快的开发体验 & 更好的代码解耦 ● 性能问题 ● 离线包优化但还是不够 ● 服务端React提升首屏速度 ● 服务端缓存渲染优化 ● 防止重复渲染原理
75. THE END