umi+react项目之SSR渲染性能优化

5 阅读1分钟

场景:

umi+react项目,ssr渲染。高并发下大量出现502,10并发下压测服务器仍直接被打满,完全不满足使用。

措施:

1、服务器扩容、pm2开启多核(tps提升到了10-15之间)

2、AI梳理:AI跑一遍列出优化点和可能的瓶颈点,对全局接口由串行改为并行。

3、请求控制+缓存策略:合并相同请求避免击穿缓存;增加url缓存,对相同url资源做缓存处理减少服务器频繁的组装,降低cpu消耗。

4、Echarts等库动态加载、静态资源直出(排除index)

测试:

1、相同页面(命中缓存场景)TPS可达70+,显著提升

2、不同页面(缓存完全miss场景)tps仅不到20,仍存在问题

排查:

1、带宽问题(缓存命中和缓存miss下资源体积几乎无差异,tps差异巨大、且带宽使用率很低,排除)

2、服务器性能(cpu和内存在tps达上限后,使用率较低,排除)

3、api服务瓶颈(经测试,发现html资源加载时长的90%时间,都用在了api请求上,锁定问题)

结果:

1、tps显著提高,100并发下,缓存页面可达70-80,缓存miss页面达30-40