前后端资源懒加载
前后端资源懒加载
前端一个页面有很多地方都要展示用户的信息,例如用户列表要展示用户的头像,名称;发消息的时候要展示用户的头像,名称
它们可能会调用不同的接口,很多要展示的内容都是重复的,而且头像的url会占了很大的资源(url可能很长),这就会导致瓶颈出现在带宽上。
图片路径协议优化
每次响应给前端的用户头像url都很长,而且url也没有规范,如何统一url,并解决资源占用的问题呢?
我们可以设计头像的规范:http://xxx/avatar/{uid}
我们前缀统一,最后一位传用户的id,这个路径就代表用户的url,这样我们后端其实就可以不用返回用户的url了,而是前端可以自己去拼接得到url,这样就可以节省了很大的带宽
懒加载优化
前端页面会在侧边栏显示所有用户信息(头像+名称),当用户发送消息的时候也会显示用户的一些信息(头像+名称+徽章),每次都去向后端请求这些数据,会导致获取大量重复的数据,并且也浪费带宽资源。
我们可以让前端自己把这些数据存在前端,每次就不用从后端重新获取了,但是怎么保证用户的信息是最新的呢,我们就去选择更新的时间点来更新这些数据。这样保证前端的数据都是最新的,也不用全部获取。
何时更新数据?数据库里有一个字段:懒加载时间lastModifyTime
1.没有数据的时候
如果我们的前端没有保存某个用户的信息,那么就去向后端要,这时候只要传想要的uid
即可,不需要全部都传
2.数据过期的时候
从数据库里获取到信息的时候,异步判断数据库里的数据
如果最后一次加载时间lastModifyTime
和当前相比超过了10分钟
,访问后端进行懒加载。
3.主动加载
如果说用户主动点击了:
- 侧边栏的用户信息
- 用户发送信息的头像或者名称
那么就去重新加载数据,保证数据是最新的
后端每次更新用户相关的信息时,就更新用户的lastModifyTime
字段,如果前端请求的时候携带的lastModifyTime
超过后端的lastModifyTime
,就代表用户在这期间没有更新,返回不需要刷新。