如何做到科学的缓存数据？

Question

问题描述：假设页面有一个数组对象如下(实际可能数据会更多)，当页面第一次拿到后端传来的数据的时候，将其进行缓存（类似localStorage）。后续的UI渲染都在缓存中拿取，那么当后端数据更新时，前端如何应该如何及时更新数据呢？以及前端更新数据的一个理想时机？

list:[{
    title:'titile1',
    content:'con1'
},{
    title:'titile1',
    content:'con1'
},{
    title:'titile1',
    content:'con1'
}]

Answer 1

这个我们公司项目做过，给你个思路吧，一类业务数据关联一个 key。后端服务返回业务数据和 key 后，前端缓存起来，然后每次请求前端要带着原 key，如果数据没变化后端只返回 key，有变化返回数据和新 key。
主要还是要看业务场景去分析和设计，缓存要想做好需要前后端一起配合，多和后端合计下怎么做。

Answer 2

数据变化不外乎两种，一种是前端用户操作之后变化，一种是后端数据变化。
如果是前端用户操作的变化，主动更新一次就可以了，比如签到送积分对应的用户积分数据。
如果是后端数据的变化，缓存一般用来做预览性展示，用到的时候先展示，然后更新，比如用户订单页。

Answer 3

websocket or 轮询
除了这两种机制我想不到第三种了。
websocket长链接，当接收到后台数据变化时更新缓存，并局部刷新 轮循 机制同理
但是轮循带来的问题就是会存在大量请求，比如1s轮循一次，1个客户端1分钟会轮循60次 100个人同时访问就会产生6000次请求，对于服务端来说实在是没有必要，如果用websocket只需要维持一个长链接1oo个人也才100个链接，离开页面的时候断掉链接。