美团美⻝频道性能优化实践

1. 美团美频道性能优化实践美团技术沙美团到餐事业部

2. 我介绍

3. 纲

4. 背景介绍-

5. 背景介绍

6. 背景介绍期望通过性能优化达到向轮效应。个正

7. 、背景介绍

8. 临挑战程化能。

9. 、背景介绍

10. 优化实践

11. 优化实践-衡量指标性能流畅度指标：RCF

12. 优化实践

13. 优化实践-

14. 优化实践- 屏优化框架相关的优化消耗的引擎初始化、加载包都是业务包为，需要合理评估使期望：尽可能快的加载运

15. 优化实践- 屏优化业务相关的优化

16. 优化实践- 屏优化业务相关的优化- 数据获取过程：屏数据快

17. 优化实践- 屏优化业务相关的优化- 参：接屏数据快

18. 优化实践- 屏优化业务相关的优化- 屏数据快发起请求：尽可能早的时机发出请求到业务才能发出，框架执业务请求需要执期间只能等待，能不能再提前？

19. 优化实践- 屏优化业务相关的优化- 预请求：屏数据快

20. 优化实践- 屏优化业务相关的优化- 服务耗时优化屏数据快

21. 优化实践- 屏优化业务相关的优化- 耗时优化：回包体积下屏数据快

22. 优化实践- 屏优化业务相关的优化- 桥回调优化屏数据快

23. 优化实践- 屏优化业务相关的优化- 屏数据快虽然已经有了预请求，请求发出时机已经等数据情况较靠前，但是服务本身耗时和传输耗时，仍会存在

24. 优化实践- 屏优化业务相关的优化-渲染内容少只渲染必要内容

25. 优化实践- 屏优化业务相关的优化- 屏延后

26. 优化实践- 屏优化业务相关的优化- 屏资源提前下载

27. 优化实践- 屏优化业务相关的优化-缓存快照

28. 优化实践

29. 优化实践-滑动流畅性优化

30. 优化实践-滑动流畅性优化静置状态，低频渲染刷新

31. 优化实践-滑动流畅性优化滑动状态

32. 优化实践

33. 优化实践-实

34. 优化实践-实具滑动流畅性优化 • 重复渲染排查：why-did-you-render • 性能采集：Perfetto/PerfDog • 耗时分析：React Native Debug/Flipper - React DevTools

35. 优化实践

36. 优化实践-防回撤

37. 、背景介绍

38. 优化成果 RCF 指标：

39. 、背景介绍

40. 未来展望 • 缓存 JS 引擎屏渲染序列 • 轻量成快照

41. Q&A

42. 招聘：到餐研发（前端、移动端、后端）邮箱：wangyuxin32@meituan.com 更多技术货欢迎关注“美团技术团队”