听阿里文娱前端技术专家狼叔如重构优酷听阿里文娱前端技术专家狼叔如重构优酷Node.js,将其性能提升三,将其性能提升三
倍!倍!
在 2017 年底,优酷只有 Passport 和土豆的部分页面用 Node.js,PC 和 H5 核心页面还都是 PHP 模板渲染。而最近 2 年,基于阿里巴巴
的技术体系,我们对 PC、H5 多端进行了技术改造。在 2019 年,React SSR 第一次且成功地扛起双 11 重任,具有一定意义。
本文将对这一技术演进之路进行总结和展望,有 2 点突出变化:
1) 我们将优酷 C 端核心页面全部用 Node 重写,完成了 PHP 到 Node.js 的迁移。在没有 PHP 同学的情况下,前端可以支撑业务;
2) 从 Bigpipe+JQuery 到 React SSR,性能明显提升。PC 页面首屏渲染降到 150ms、播放器起播时间从 4.6 秒优化到 2 秒。H5 站上了
React SSR 后,性能提升 3 倍。
一、演进之路
优酷前端团队在之前 PC 首页 / 频道页面改造的基础上,将 React 服务端渲染沉淀出了一个技术框架,该项目已经在 Github 开源,截止
2020 年 1 月底已有 657 star,具体使用方式和源码请查看 egg-react-ssr 项目地址:
https://github.com/ykfe/egg-react-ssr
第一版:Bigpipe + JQuery
评论0