前端框架对页面性能的探索和实践

1. 前端框架对页面性能的探索和实践夏温武阿里巴巴前端技术专家

2. 目录 01 性能优化的困境 02 框架如何提升页面性能 03 框架页面性能探索的方向

3.

4. 性能优化的困境

5. 性能优化的重要性 @Amazon 100 ms of latency resulted in 1% less sales. @Google 500 ms caused a 20% drop in traffic. @Walmart a 100 ms improvement brought up to 1% incremental revenue. @Yahoo 400 ms resulted in a 5 to 9% drop in traffic.

6. 了解常见性能指标 FP First Paint FCP First Contentful Paint DCL DOM Content Loaded LCP Largest Contentful Paint

7. 性能优化的手段

8. 性能优化的困境方案组合多开发成本高链路打通难面对各种各样的性能优化方案，开发者传统体验优化方案需要开发者重参与，往往难以组合应用先开发后治理的形式难以持续性能优化不仅仅只是存在于前端的范畴，缺少打通端与端之间协作的手段框架开箱即用的技术方案普适性的优化策略

9. 框架如何提升页面性能开箱即用的 SSR 方案

10. SSR 带来的性能提升 SSR （Server-side rendering）可以让首屏可见时间得到提升首屏内容可见 CSR 浏览器下载 HTML SSR 浏览器下载 JS 首屏内容可见浏览器执行 JS 页面准备就绪

11. 开发者如何使用 SSR 源码开发工程链路服务处理 Server 端渲染逻辑兼容 CSR / SSR 执行 Server 脚本构建 Server 脚本执行 HTML 和数据的组装初始化数据读取 … 本地调试 SSR 产物发布和部署 … 降级兼容处理 …

12. SSR 工程链路设计框架通过整合设计避免开发在源码和工程上的修改

13. 开箱即用的 SSR 由应用框架承接 SSR 全栈开发，减少开发部署成本

14. 实时的 SSR 链路设计实时性要求高，页面内容与用户强相关增加 CDN 节点用于处理兜底降级统一接入的网关增加浏览的安全验证接入 FaaS 简化应用的部署和运维

15. 可缓存的 SSR 链路设计实时性要求不高，借助缓存渲染结果进一步提升性能当用户页面数据存在副本时，则直接返回页面

16. SSR 带来的实际效果

17. SSR落地的最后一公里基于 FaaS 的研发模式，打通平台链路，让开发者专注于业务本身，减少 SSR 落地成本

18. 框架如何提升页面性能终端统一的优化方案

19. 业务投放的容器面向复杂的投放环境，如何针对性进行性能优化？ Web 标准 PHA Weex 符合 Web 标准的容器，比遵循 Web 标准的同时，提面向 Web 标准的原生渲染如常见的 chrome 供渐进式增强的能力引擎

20. 逐步结合容器优化性能 - Phase 01 - - Phase 02 - - Phase 03 - 直接应用容器特性定制性能优化方案结合容器进一步优化

21. 利用容器特性提升性能为 Weex 容器 Bytecode 产物利用容器提供的执行性能优势，可以普适性提升页面性能

22. 优化 Web 请求流程 Web 标准下最大限度提前页面数据加载时机页面的数据请求不再依赖业务 bundle 完成加载解析，而是并行、不阻塞

23. 优化 Web 请求流程 Web 标准下最大限度提前页面数据加载时机

24. 优化 Web 请求流程优化请求流程效果

25. 结合容器能力统一设计为 PHA 容器构建生成应用的描述信息

26. 结合容器能力统一设计终端统一的请求设计

27. 结合容器能力统一设计多端容器下优化的请求流程

28. 面向多端的最佳产物

29. 探索的方向

30. 云端结合的研发方案 Streaming SSR 和 Server Components，更快的 TTI 和更小的 bundles 大小

31. 云端结合的研发方案通过框架能力一键开启相关能力 Client 端自动消费以 Streaming 形式返回的数据 Server 端执行自动捕获内部异步请求，以 Streaming 形式返回开启 Suspense 能力，框架自动注入相关运行时逻辑

32. 基于标准协议的优化策略通过标准化协议，前置获取相关信息

33. 终端融合的请求优化结合云和端将数据请求和资源加载更加彻底的并行

34. 总结低成本方案建设简化性能优化方案的成本，可以让业务快速逻辑和实践方案。低成本的建设，包括不限于源码链路、工程链路以及发布链路的开箱即用 01 普适化能力的组合 02 03 传统的性能方案，先开发后治理，要求开发者重参与。而普适化的性能优化可以让开发者关注业务开发的同时获得性能优化。包括不限于开发的约定、容器能力的应用多端融合的性能突破性能优化从来不是单点提升就可以解决的，除了前端的优化手段，更要结合云和端上的特性，去尝试探索面向业务的最佳链路

35. 扫码回复「D2」获取第十七届 D2 演讲 PDF 材料后续也将推送 D2 会后技术文章，敬请关注！！

36. 感谢大家观看