React同构与极致的性能优化.docx

PAGE21

React同构与极致的性能优化

前言

随着React的兴起,结合Node直出的性能优势和React的组件化，React同构已然成为趋势之一。享受技术福利的同时，直面技术挑战，在复杂场景下，挑战10倍以上极致的性能优化。

什么是同构？

一套代码既可以在服务端运行又可以在客户端运行，这就是同构应用。简而言之,就是服务端直出和客户端渲染的组合,能够充分结合两者的优势，并有效避免两者的不足。

为什么同构？

性能:通过Node直出,将传统的三次串行http请求简化成一次http请求，降低首屏渲染时间

SEO:服务端渲染对搜索引擎的爬取有着天然的优势，虽然阿里电商体系对SEO需求并不强，但随着国际化的推进,越来越多的国际业务加入阿里大家庭，很多的业务依赖Google等搜索引擎的流量导入，比如Lazada.

兼容性:部分展示类页面能够有效规避客户端兼容性问题，比如白屏。

性能数据

性能是一个综合性的问题,不能简单地断言同构应用一定比非同构应用性能好，只能说合适的场景加上合理的运用，同构应用确实能带来一定的性能提升,先来看一个线上的案例。

通常来说，网络状况越差，同构的优势越明显，下图是在不同网络状况下首屏渲染时间的一组对比：

线上案例

近两年，无论是业界还是阿里内部都涌现了大量同构实践,业界比较有影响力的包括Facebook,Quora,Medium,Twitter,Airbnb,Walmart、手Q以及QQ兴趣部落等

阿里内部也有大量的应用，仅列举部分beidou开发组做过技术支持的项目

阿里云-大数据地产

钉钉-企业主页

钉钉-钉钉日志和审批模板市场

菜鸟-物流大市场

云零售-店掌柜

Lazada-PDP

国际事业部-AGLA

AILab-行业解决方案

AILab-智能硬件平台

AILab-AliGenie开放平台

AILab-AR官网

ICBU-ICBU店铺

业务平台-门店评价

国际UED-数据运营

国际UED-知之

国际UED-探花

国际UED-Nuke官网及过程管理

国际UED-会议记录，实时翻译

国际UED-LBS数据地图

国际UED-数探

国际UED-微策

国际UED-shuttle

国际UED-fieportal

...

业界生态

react-server:React服务端渲染框架

next.js:轻量级的同构框架

beidou:阿里自己的同构框架，基于eggjs,定位是企业级同构框架

除了开源框架，底层方面React16重构了SSR,react-router提供了更加友好的SSR支持等等,从某种程度上来说，同构也是一种趋势，至少是方向之一。

思考与实现

同构的出发点不是“为了做同构，所以做了”,而是回归业务，去解决业务场景中SEO、首屏性能、用户体验等问题，驱动我们去寻找可用的解决方案。在这样的场景下，除了同构本身，我们还需要考虑的是：

高性能的NodeServer

可靠的同构渲染服务

可控的运维成本

可复用的解决方案

...

简单归纳就是,我们需要一个企业级的同构渲染解决方案。

我们是怎么做的？

基于eggjs加入可拔插的同构能力

beidou-plugin-react作为原有MVC架构中,view层的替换,使用React组件作为视图层模板,可以直接渲染ReactComponent并输出给客户端

beidou-plugin-webpack集成Webpack到框架中,在开发阶段,提供代码的编译和打包服务

beidou-plugin-isomorphic服务端的React运行时:babel-registerpolyfill注入:环境变量,BOM等非js文件解析:css,images,fonts...

服务端支持cssmodules

自动路由:纯静态页面无需编写任何服务端代码，像写纯前端页面一样简单

...

这里不再赘述具体如何实现，有兴趣的读者可以阅读我们的开源同构框架beidou--/alibaba/beidou

热点问题

任何一种技术都有其适用场景和局限性,同构也不例外，以下试举一二，以做抛砖引玉。

内存泄漏

性能瓶颈

...

内存泄漏不是同构应用所特有的，理论上所有服务端应用都可能内存泄漏，但同构应用是“高危群体”,具体如何解决请参考本人的《Node应用内存泄漏分析方法论与实战》（/alibaba/beidou/blob/master/packages/beidou-docs/articles/node-memory-leak.md），接下来重点剖析下性能优化。

极