Skip to main content

前后端资源懒加载


前后端资源懒加载

前端一个页面有很多地方都要展示用户的信息,例如用户列表要展示用户的头像,名称;发消息的时候要展示用户的头像,名称

它们可能会调用不同的接口,很多要展示的内容都是重复的,而且头像的url会占了很大的资源(url可能很长),这就会导致瓶颈出现在带宽上。

图片路径协议优化

每次响应给前端的用户头像url都很长,而且url也没有规范,如何统一url,并解决资源占用的问题呢?

我们可以设计头像的规范:http://xxx/avatar/{uid}

我们前缀统一,最后一位传用户的id,这个路径就代表用户的url,这样我们后端其实就可以不用返回用户的url了,而是前端可以自己去拼接得到url,这样就可以节省了很大的带宽

懒加载优化

前端页面会在侧边栏显示所有用户信息(头像+名称),当用户发送消息的时候也会显示用户的一些信息(头像+名称+徽章),每次都去向后端请求这些数据,会导致获取大量重复的数据,并且也浪费带宽资源。

我们可以让前端自己把这些数据存在前端,每次就不用从后端重新获取了,但是怎么保证用户的信息是最新的呢,我们就去选择更新的时间点来更新这些数据。这样保证前端的数据都是最新的,也不用全部获取。

何时更新数据?数据库里有一个字段:懒加载时间lastModifyTime

1.没有数据的时候

如果我们的前端没有保存某个用户的信息,那么就去向后端要,这时候只要传想要的uid即可,不需要全部都传

2.数据过期的时候

从数据库里获取到信息的时候,异步判断数据库里的数据

如果最后一次加载时间lastModifyTime和当前相比超过了10分钟,访问后端进行懒加载。

3.主动加载

如果说用户主动点击了:

  • 侧边栏的用户信息
  • 用户发送信息的头像或者名称

那么就去重新加载数据,保证数据是最新的

后端每次更新用户相关的信息时,就更新用户的lastModifyTime字段,如果前端请求的时候携带的lastModifyTime超过后端的lastModifyTime,就代表用户在这期间没有更新,返回不需要刷新。