Saas产品性能优化实战

1. 目标

对一款在浏览器提供服务的产品,进行性能优化,提升页面响应速度, 提升用户体验。

2. 性能瓶颈分析

页面访问使用频率

通过前端埋点(如有),统计用户最常用的页面,抓大放小,优先优化这些页面。

如果没有前端埋点,建议把产品首页加载做性能优化,同时补齐前端埋点进行统计。

页面加载性能分析

利用Chrome等浏览器的性能分析工具,我们对一款ToB产品神策进行性能分析:

地址:https://family.demo.sensorsdata.cn/dashboard/?project=EbizDemo\&product=sbp_family\&id=413\&dash_type=lego

指标 解释
FCP(First Contentful Paint) FCP 测量呈现 DOM 中第一个内容的时间点------这意味着将显示第一个 HTML 元素
LCP(Largest Contentful Paint ) 最大元素绘制事件。测量加载性能。为了提供良好的用户体验,LCP 应该控制在页面首次开始加载后的 2.5 秒内。

主要分析FCP和LCP之间的交互

通常LCP控制在2.5s以内,会体感比较好,而该页面在5s左右,有待改进。

静态资源加载方面:

有2个js加载较慢,如图所示需要920ms,可以优化。

优化思路:大图片压缩、Js文件大小压缩、延迟加载。

这种优化要比改代码的成本低得多。

前后端交互方面:

这些js加载,都在permission接口之后,permission接口响应时长1.52s,导致这些js都只能在这之后加载。应该分析能否并行加载。

另外一个常见的思路是:首屏不要渲染没必要的组件。

后端接口方面:

permission、rendor接口响应时长为2s左右,有较大优化的空间。

请求链路梳理

和系统通常,浏览器会从cdn等加载静态资源,然后经过LB、Nginx请求后端,后端服务之间的调用等等。

3. 打点上报、搭建性能看板

上面通过浏览器分析工具分析,只能分析单次请求,但接口响应速度上,我们应该看接口的平均耗时、PCT90(90%响应时长)等等

这就需要我们在后端代码中,增加埋点上报,然后搭建性能看板了。

开源的埋点上报工具有很多,这里就不一一列举了。

有的tracing工具,能直接帮你把打点、链路性能分析都做了,强大的很,最好直接用。

哪些需要打点:

  1. 接口响应时长的打点
  2. 接口内部耗时操作的打点:1. 调用第三方服务 2. 复杂方法 3. 调用Mysql等组件

4. 后端工作项拆分

事项 描述
测试环境准备 测试以上几个阻塞性接口和页面渲染性能,统计提升比例
打点补齐 前端页面渲染重要指标打点
网关服务打点
阻塞性接口重点业务逻辑打点
阻塞性接口调用第三方服务打点
缓存命中率打点
数据分析&优化 系统框架优化
接口逻辑优化

接口逻辑优化

优化项 描述
超大接口拆分成多个小接口 比如页面加载时,一个请求包含了所有页面初始化所需的信息,包括产品信息、用户信息、用户权限,则最好拆分一下,也方便前端并行调用
第三方服务调用 减少不必要的第三方服务调用
对第三方服务的调用 先后没有依赖关系的,可以串行改并行
缓存 对不常改变的数据,使用本地/Redis缓存
缓存预加载 针对首次访问没有缓存加载慢的问题,可以预加载缓存
Mysql慢查询 索引、拆表

在接口优化方面,除了通过埋点,也有性能分析工具,能直观帮我们分析瓶颈,如go的Pprof,python的cProfile。

参考:Golang 大杀器之性能剖析 PProf

性能分析工具的好处是快、准确,但只能看单次的。埋点的好处是可以搭建监控看板,可以一直看。

系统框架优化

引入线程池

举个例子,Python的Gevent库,可以在IO阻塞时,调起其他协程,大大增加系统的吞吐量,而且对进行开发工作的程序员是无感的。

Gevent是一种协程的Python网络库,基于Greenlet封装了libevent事件循环的高层同步API。它让我们在不改变编程习惯的同时,用同步的方式写异步I/O的代码。使用Gevent编程性能确实要比用传统的线程高。

动态扩缩容

监测CPU和内存的水位,在到达如80%、90%时,就自动扩容机器。

在CPU和内存在一定水位之下,就将扩容的机器缩容掉。

比如一个核心服务正常有8个Pod,在需要扩容时,最大扩到16,在不需要时,最小保持8个Pod。

5. 性能监控和定期回顾

性能优化不易,最好是设置性能监控的告警,当超过一定阈值时,就要分析是不是最近新上的需求,让性能劣化了。

相关推荐
Anlici13 小时前
如何优化十万数据的浏览体验?从性能、监控到布局全面拆解
前端·性能优化
得物技术1 天前
得物 iOS 启动优化之 Building Closure
ios·性能优化
斯~内克2 天前
前端图片加载性能优化全攻略:并发限制、预加载、懒加载与错误恢复策略
前端·性能优化
无知的前端2 天前
Flutter 一文精通Isolate,使用场景以及示例
android·flutter·性能优化
人工智能培训咨询叶梓2 天前
LLAMAFACTORY:一键优化大型语言模型微调的利器
人工智能·语言模型·自然语言处理·性能优化·调优·大模型微调·llama factory
计算机毕设定制辅导-无忧学长2 天前
HTML 性能优化之路:学习进度与优化策略(二)
学习·性能优化·html
庸俗今天不摸鱼2 天前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
Process3 天前
前端图片技术深度解析:格式选择、渲染原理与性能优化
前端·面试·性能优化
沐土Arvin3 天前
Nginx 核心配置详解与性能优化最佳实践
运维·开发语言·前端·nginx·性能优化