业务场景:
最近在公司做前端业务时,遇到了如下的一个场景,一个配置商品并进行付费的页面,页面的数据交互比较复杂,当任意一款商品的某个参数变化后,需要重新计算价格以保证商品的价格适中快速准确的更新。
由于数据交互比较频繁,因此加入不作任何优化的话,页面会频繁的触发价格重新计算,每一次计算价格都需要调后端的api,假如连续不断的触发计算价格请求,会造成前端性能的极大浪费,因为很有可能连续几次请求的商品配置是一样的,计算出的价格自然也是相等的,也就是说白白浪费了多次相同的请求。理想状况应该是这样的,当商品参数真正变化时,再重新去调计算价格的api,http/https请求的开销是非常高昂的,应该尽可能的减少前端不必要的请求,否则用户体验会很差。
针对策略:
- 防抖 (debounce) 处理,多次连续的请求只取最后一次请求,防止快速大量触发接口调用;
- 做参数缓存处理,每次计算价格请求成功响应后,将该次请求的参数和计算的价格缓存下来,在下次将要计算商品价格时将新的商品参数和上次缓存的商品参数做深度相等比较 (这个概念不熟悉的话自行百度哈,其实underscore的isEqual就是做这个用的),如果前后两次参数深度相等,则直接取缓存里的价格,否则就重新请求计算价格api,得到新的价格。