React前后端同构之道,pdfx

前端狗

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

文字内容
1. React 前后端同构之道
2. About me 杨春文 2012 - 2015 2015 - now 百度 腾讯 fudao.qq.com http://imweb.io
3. 同构 • React • why • How • Challenge
4. Thinking in React
5. Thinking in React web component
6. Thinking in React
7. Thinking in React
8. props & state server getDefaultProps componentWillReceiveProps getInitialState shouldComponentUpdate componentWillMount componentWillUpdate render componentDidMount componentDidUpdate componentWillUnmount
9. React + Redux 数据<=>UI解耦 架构清晰 维护方便 组件很容易前后端复用
10. 最初做法 user 空白html 拉取js js初始化 数据 js组装 UI
11. 空白html 开始渲染首屏 数据接口
12. 离线包 user 空白html 拉取js js初始化 数据 js组装 UI
13. (离线包)首屏时间 某页面首屏时间 ≈ 1.2s
14. 时间都去哪了 user ≈400ms 空白html 拉取js ≈550ms js引擎 数据 ≈170ms js引擎 UI
15. React引擎初始化
16. Reac引擎初始化
17. Reac引擎初始化
18. React引擎初始化
19. React引擎初始化
20. React引擎初始化
21. React引擎初始化
22. React引擎初始化
23. React引擎初始化
24. 其他基础框架
25. 其他基础框架 实测平均近400+ms!
26. 离线包挑战:命中率 APP (≈ 100%) 手Q (<= 30%) 其他 (无)
27. 时间都去哪了 user ≈400ms 空白html 拉取js ≈550ms js引擎 数据 ≈170ms js引擎 UI
28. 数据接口时间消耗 某ajax请求耗时曲线
29. React真的很快吗? React渲染组件树(DOM) user ≈400ms 空白html 拉取js ≈550ms js引擎 数据 ≈170ms js引擎 UI
30. render: 组件树从上往下 一层层依次渲染/更新
31. 优化思路 第一个请求中就返回首屏 耗时的操作放到首屏展示后 初始JS 拉取非首屏数据 渲染非首屏
32. 异步渲染 服务端渲染
33. 服务端React nt clie component DOM Virtual DOM data ser ver HTML string
34. 服务端React nt clie component DOM Virtual DOM data ser ver HTML string
35. 同构 nt clie component DOM Virtual DOM data ser ver HTML string
36. 数据服务器 ajax browser(离线包) fetch('/cgi-bin/get_data').then store = createStore(reducer, data)
DOM HTML string UI node
37. 数据服务器 ajax browser(离线包) fetch('/cgi-bin/get_data').then store = createStore(reducer, data) 同构 ● 封装一样的数据 API (fetch) ● 数据处理层(reducer)复用 ● React UI组件复用
DOM HTML string UI node
38. 服务端渲染 user 拉取首屏 拉取js js初始化 复用数据 react 二次执行 UI
39. 服务端 + 离线包 user 拉取首屏 拉取js js初始化 复用数据 react 二次执行 UI
40. 异步渲染 user 首屏 ≈400ms 空白html 拉取js ≈550ms react 初始化 数据 ≈170ms react渲染 UI
41. 服务端 + 离线包 ≈790ms user 首屏 拉取首屏 拉取js js初始化 复用数据 ≈50ms react 二次执行 UI
42. 异步渲染 这步放到了服务端 服务端渲染
43. 效果 首屏时延-离线包 (1.17021s) 首屏时延-服务端渲染 (0.795304s)
44. 代码复用 纯server代码
45. 一些Tips 服务端只生成首屏 只为了减少白屏时间 node拉取数据也消耗时间
46. 首屏
47. 一些Tips 服务端只生成首屏 只为了减少白屏时间 node拉取数据也消耗时间 客户端API 要谨慎
48. new props & state getDefaultProps 同构组件中,这些函数不能使用 window, navigator, document等 API componentWillReceiveProps getInitialState shouldComponentUpdate componentWillMount componentWillUpdate render componentDidMount componentDidUpdate componentWillUnmount
49. 重复渲染?
50. 重复渲染? react(data) 首屏 data react(data) 首屏 data react(data) 非首屏
51. 重复渲染? react(data) 首屏 data react(data) 首屏 data react(data) 非首屏
52. 服务端首屏文本
53. checksum:html内容的Adler-32算法值 component Virtual DOM renderToString HTML string data 计算Adler-32算法值 checksum
54. checksum:html内容的Adler-32算法值 只要组件、数据一致,前端checksum也会和后台一致 直接跳过render(重复渲染) component Virtual DOM renderToString HTML string data 计算Adler-32算法值 checksum
55. checksum server Virtual DOM HTML string checksum (server) DOM checksum (client) HTML string Virtual DOM client
56. 小结 ● react + redux: 畅快的开发体验 & 更好的代码解耦 ● 性能问题 ● 离线包优化但还是不够 ● 服务端React提升首屏速度 ● 同构Tips ● 重复渲染
57. Thanks!