宏任务与微任务

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

  1. 防抖 (debounce) 处理,多次连续的请求只取最后一次请求,防止快速大量触发接口调用;
  2. 做参数缓存处理,每次计算价格请求成功响应后,将该次请求的参数和计算的价格缓存下来,在下次将要计算商品价格时将新的商品参数和上次缓存的商品参数做深度相等比较 (这个概念不熟悉的话自行百度哈,其实underscore的isEqual就是做这个用的),如果前后两次参数深度相等,则直接取缓存里的价格,否则就重新请求计算价格api,得到新的价格。
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值